xiangan_pc/src/components/360View/dataInfo.vue

<template>
  <div class="infoContainer">
    <div v-if="foreList.length" style="padding: 6px">
      <el-table
        max-height="450"
        :data="foreList"
        style="width:100%;margin: 8px 8px 0 0"
      >
        <el-table-column
          align="center"
          type="index"
          width="30"
        />
        <el-table-column
          align="center"
          prop="name"
          label="项目"
          width="120"
        />
        <el-table-column
          align="center"
          label="OD"
          width="120"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.sort === 1">
                <span style="margin-right: 16px">结膜：充血</span>{{ scope.row.odValue }}
              </span>
              <span v-else-if="scope.row.sort === 2">
                <span style="margin-right: 16px">结膜：分泌物</span>{{ scope.row.odValue }}
              </span>
              <span v-else-if="scope.row.sort === 3">
                <span style="margin-right: 16px">视盘：视神经</span>{{ scope.row.odValue }}
              </span>
              <span v-else-if="scope.row.sort === 4">
                <span style="margin-right: 16px">视盘：CDR</span>{{ scope.row.odValue }}
              </span>
              <span v-else-if="scope.row.sort === 5">
                <div v-if="scope.row.eyeType === 'OD'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">等效球镜：{{ scope.row.odSe }}</p>
                </div>
              </span>
              <span v-else-if="scope.row.sort === 6">
                <div v-if="scope.row.eyeType === 'OD'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">矫正视力VA：{{ scope.row.odVa }}</p>
                </div>
              </span>
              <span v-else>
                {{ scope.row.odValue }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="OS"
          width="120"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.sort === 1">
                <span style="margin-right: 16px">结膜：充血</span>{{ scope.row.osValue }}
              </span>
              <span v-else-if="scope.row.sort === 2">
                <span style="margin-right: 16px">结膜：分泌物</span>{{ scope.row.osValue }}
              </span>
              <span v-else-if="scope.row.sort === 3">
                <span style="margin-right: 16px">视盘：视神经</span>{{ scope.row.osValue }}
              </span>
              <span v-else-if="scope.row.sort === 4">
                <span style="margin-right: 16px">视盘：CDR</span>{{ scope.row.osValue }}
              </span>
              <span v-else-if="scope.row.sort === 5">
                <div v-if="scope.row.eyeType === 'OS'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">等效球镜：{{ scope.row.odSe }}</p>
                </div>
              </span>
              <span v-else-if="scope.row.sort === 6">
                <div v-if="scope.row.eyeType === 'OS'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">矫正视力VA：{{ scope.row.odVa }}</p>
                </div>
              </span>
              <span v-else>
                {{ scope.row.osValue }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="OU"
          width="120"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.sort === 1">
                <span style="margin-right: 16px" />{{ scope.row.ouValue }}
              </span>
              <span v-else-if="scope.row.sort === 5">
                <div v-if="scope.row.eyeType === 'OU'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">等效球镜：{{ scope.row.odSe }}</p>
                </div>
              </span>
              <span v-else-if="scope.row.sort === 6">
                <div v-if="scope.row.eyeType === 'OU'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">矫正视力VA：{{ scope.row.odVa }}</p>
                </div>
              </span>
              <span v-else>
                {{ scope.row.ouValue }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="130">
          <template slot-scope="scope">
            <span
              class="cell-cursor"
              style="margin-left: 5px;"
              :class="scope.$index === 0 ? 'table-column-disable' : ''"
              @click="handleMove(scope, 'up', foreList)"
            >上移</span>
            <span
              class="cell-cursor"
              style="margin-left: 5px;"
              :class="scope.$index === foreList.length - 1 ? 'table-column-disable' : ''"
              @click="handleMove(scope, 'down', foreList)"
            >下移</span>
            <span
              class="cell-cursor"
              style="margin-left: 5px;color: #FF4D4F"
              @click="handleDel(scope.$index, foreList)"
            >
              删除
              <!--            <i class="el-icon-delete"></i>-->
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="width: 100%;margin-top: 16px;display: flex;justify-content: space-between">
      <el-button style="width: 48%;" type="primary" size="small" @click="addExamine">引入专科检查</el-button>
      <el-button class="btn" style="width: 48%" size="small" :data-clipboard-text="coryData" @click="onCopy">复制</el-button>
    </div>
  </div>
</template>

<script>
import dialogjs from '@/mixins/dialog'
import eventBus from '@/page-subspecialty/utils/eventBus'
import Clipboard from 'clipboard'
export default {
  components: {
  },
  mixins: [dialogjs],
  props: {
    patientIdNumber: {
      type: String,
      default: ''
    },
    dataList: {
      type: Array,
      default() {
        return []
      }
    },
    foreList: {
      type: Array,
      default() {
        return []
      }
    },
    afterList: {
      type: Array,
      default() {
        return []
      }
    },
    sourceData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      clipboard: null,
      setPlanList: [],
      coryData: [],
      addFollowList: [],
      patientInfoHeadHeight: '',
      crfSelectVisible: false
    }
  },
  mounted() {
  },
  methods: {
    removeBlock(str) {
      if (str) {
        str = str.replace(/\[|]/g, '')
        str = str.replace(/\,/g, ' ')
        str = str.replace(/abcde/g, '\n')
        str = str.replace(/\"/g, '')
        return str
      } else {
        return str
      }
    },
    // 复制
    onCopy() {
      this.coryData = []
      this.foreList.forEach((item, index) => {
        this.coryData.push(item.name, item.odValue ? item.odValue : '', item.osValue ? item.osValue : '', 'abcde')
      })
      this.coryData = this.removeBlock(JSON.stringify(this.coryData))
      this.clipboard && this.clipboard.destroy()
      this.clipboard = null
      this.clipboard = new Clipboard('.btn')
      const self = this
      this.clipboard.on('success', function(e) {
        self.$message.success('复制成功!')
        e.clearSelection()
      })
      this.clipboard.on('error', function(e) {
        self.$message.warning('复制失败!')
      })
    },
    // 上下移动
    handleMove(scope, moveType, list) {
      const { $index } = scope
      if (moveType === 'up') {
        if ($index === 0) return
        const isUp = list[$index - 1]
        list.splice($index - 1, 1)
        list.splice($index, 0, isUp)
      } else {
        if ($index === list.length - 1) return
        const isDown = list[$index + 1]
        list.splice($index + 1, 1)
        list.splice($index, 0, isDown)
      }
    },
    // 删除
    handleDel(index, list) {
      list = list.splice(index, 1)
    },
    // 引入专科检查
    addExamine() {
      eventBus.$emit('sendDataToExamine', this.foreList)
    }
  }
}
</script>
<style lang="scss" >

</style>

<style lang="scss" scoped>
.infoContainer {
  width: 650px;
  height: 100%;
  overflow-y: auto;
  .cell-cursor {
    cursor: pointer;
    color: #1e79ff;
  }
  .table-column-disable {
    color: #dddd;
  }
}
</style>