LiaoningYaopinIframe/src/views/firmContent/drugInfo/adverseReaction/adverseReaction.vue

<template>
  <div class="adverseReaction">
    <block-header title="查询结果">
      <div class="tables">
        <el-table
          :data="tableData"
          style="width: 100%"
          :cell-style="columnStyle"
          v-loading="loading"
          border
        >
          <el-table-column
            prop="id"
            header-align="center"
            label="序号"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="durgName"
            header-align="center"
            label="药品通用名称"
          >
          </el-table-column>
          <el-table-column
            prop="wenhao"
            label="批准文号"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="bianhao"
            label="报告编号"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="患者姓名"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="hospitalName"
            label="医院名称"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="addresName"
            label="报告地区名称"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            header-align="center"
            width="100"
          >
            <template slot-scope="scope">
              <div class="button">
                <el-button
                  size="mini"
                  class="informant-btn"
                  plain
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">查看
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination" :class="transinformation.b == '1' ? 'paginationTwo':''">
        <!-- <span class="custom"
          >共{{ total }}条，显示{{
            total == 0
              ? "0"
              : queryCondition.current == 1
              ? "1"
              : queryCondition.size * (queryCondition.current - 1) + 1
          }}-{{ numberMap() }}条</span
        > -->
        <span class="custom">
          共100条，显示1-10条
        </span>
        <el-pagination
          background
          :small="transinformation.b == '1'"
          :page-sizes="[10, 15]"
          :total="total"
          layout=" prev, pager, next, sizes, jumper"
          @current-change="currentChange"
          @size-change="sizeChange"
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
        >
        </el-pagination>
      </div>
    </block-header>
  </div>
</template>
<script>
import blockHeader from "@/views/firmContent/components/blockHeader/index.vue"
export default {
  data() {
    return {
      tableData:[
        // {
        //   id:1,
        //   durgName:'布洛芬胶囊',
        //   wenhao:'国药准字Z20213077',
        //   bianhao:'YC20230619',
        //   name:'张三',
        //   hospitalName:'辽宁省人民医院',
        //   addresName:'沈阳',
        // }
      ],
      loading:false,
      // adverseReactionStyle:{
      //   height:''
      // }
      currentPage:1,
      pageSize:10,
      total:100,
    }
  },
  props:['transinformation'],
  components:{ blockHeader },
  methods:{
    // tabs某列的样式修改
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 7 || columnIndex == 0) {
        return "font-family: DIN;";
      } else if (columnIndex == 2 || columnIndex == 1 || columnIndex == 3 || columnIndex == 4) {
        return "font-family: Source Han Sans CN;";
      } else if(columnIndex == 5 || columnIndex == 6 || columnIndex == 8) {
        return "font-family: Adobe Heiti Std;font-weight: normal;";
      }
    },
    handleEdit(index,row){
      
    },
    currentChange(index){

    },
    sizeChange(index){

    },
  },
  // mounted(){
  //   this.$nextTick(()=>{
  //     let dom = document.getElementsByClassName('adverseReaction');
  //     let height = dom[0].getBoundingClientRect();
  //     let windowWidth = window.innerWidth;
  //     let windowHeight = window.innerHeight;
  //     let relativeHeight = windowHeight - height.top - (26 / 1920 * windowWidth)
  //     this.adverseReactionStyle.height = relativeHeight + 'px'
  //   })
  // }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/utils.scss";
.adverseReaction {
  // overflow-y: scroll;
}
.tables {
  .button {
    display: flex;
    justify-content: center;
  }
  .informant-btn {
    padding: 12px 30px;
    width: vw(44);
    height: vh(20);
    background: #e4effd;
    border: vw(1) solid #8cb9f8;
    border-radius: vw(4);
    line-height: vh(20);
    display: flex;
    justify-content: center;
    align-items: center;
    ::v-deep span {
      display: inline-block;
      color: #1e80eb;
      font-size: vw(14);
      font-family: Adobe Heiti Std;
      font-weight: normal;
    }
  }
  ::v-deep .el-table td {
    height: vh(40);
    padding: 0;
    font-size: vw(14);
    font-weight: 400;
    color: #292F38;
  }
  ::v-deep .el-table th {
    height: vh(40);
    padding: 0;
    font-size: vw(14);
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #292f38;
    line-height: vh(50);
  }
  ::v-deep .cell {
    text-align: center;
  }
}
.pagination {
  margin-top: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // padding-bottom: vh(20);
  ::v-deep .el-pagination__jump {
    margin: 0;
  }
  ::v-deep .el-input--mini .el-input__inner {
    height: vw(28);
  }
  .custom {
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #292f38;
    line-height: 18px;
  }
}
.paginationTwo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: vh(20);
  .custom {
    font-size: vw(14);
    font-family: Source Han Regular CN;
    font-weight: 400;
    color: #292f38;
    line-height: vh(28);
  }
}
</style>