LiaoningChanpinHuaxiang/src/views/bigpage/bigcomponents/ChangeinformationList.vue

<template>
  <div class="Basic-box" ref="basic">
    <el-table :data="tableData" v-loading="load1" element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :height="height" stripe
      style="width: 100%; background-color: transparent">
      <el-table-column v-for="(item, index) in tableHeader1" :key="index" :prop="item.prop" :label="item.label"
        :width="item.width || ''" show-overflow-tooltip align="center">
      </el-table-column>
    </el-table>
    <div ref="pagination">
      <Pagination :total="total" :page="query.current" :limit="query.size" @pagination="changeList"></Pagination>
    </div>
  </div>
</template>

<script>
import { getDrugChange } from "@/api/largeScreen";
import Pagination from "@/views/components/Pagination";
export default {
  name: "Basicbox",
  components: { Pagination },
  data() {
    return {
      tableHeader1: [
        {
          prop: "bgxm",
          label: "变更项目",
          // width: "100",
        },
        {
          prop: "bgsx",
          label: "变更事项",
        },
        {
          prop: "bgsj",
          label: "变更时间",
          // width: "100",
        },
      ],
      // tableHeader2: [
      //   {
      //     prop: "bgxm",
      //     label: "变更内容",
      //   },
      //   {
      //     prop: "bgsj",
      //     label: "变更时间",
      //   },
      // ],
      tableData: [],
      query: {
        current: 1,
        size: 10,
        name: "",
      },
      total: 0,
      load1: false,
      height: 0,
    };
  },
  created() { },
  mounted() {
    this.$nextTick(() => {
      this.height =
        this.$refs.basic.offsetHeight - this.$refs.pagination.offsetHeight;
    });
    this.getList();
  },
  methods: {
    getList() {
      let newRouter = this.$route.query;

      this.query.name = newRouter.code;
      this.load1 = true;
      if (this.query.name == "国药准字H21020985") {
        this.tableData = [{
          bgsj: "2020/6/15",
          bgsx: "再注册",
          bgxm: "符合《药品注册管理办法》的有关规定，进行再注册"
        },{
          bgsj: "2020/10/25",
          bgsx: "企业更名",
          bgxm: "生产企业名称由沈阳志鹰药业有限公司变更为辽宁亿帆药业有限公司"
        },{
          bgsj: "2020/12/30",
          bgsx: "生产地址变更",
          bgxm: "生产地址由沈阳市沈河区万柳塘路51号变更为本溪经济技术开发区香槐路67号"
        },{
          bgsj: "2022/4/20",
          bgsx: "合并审批结论",
          bgxm: "辽备2022008948予以备案，申请人对申报资料的真实性、准确性、完整性负责"
        },]
        this.total = 4;
        this.load1 = false;
        return
      }
      if (this.query.name == "国药准字H19990372") {
        this.tableData = [{
          bgsj: "2020/7/13",
          bgsx: "再注册",
          bgxm: "符合《药品注册管理办法》的有关规定，进行再注册"
        }]
        this.total = 1;
        this.load1 = false;
        return
      }
      getDrugChange(this.query).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.load1 = false;
      });
    },
    changeList(e) {
      this.query.current = e.page;
      this.query.size = e.limit;
      this.getList();
    },
  },
  computed: {},
};
</script>
<style scoped lang='scss'>
.Basic-box {
  margin-top: 10px;
  max-width: 100%;
  height: calc(100% - 41px - 10px);
  // padding: 0 11px 11px 11px;
  overflow-y: auto;
  background-color: transparent;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

::v-deep .el-table th {
  background-color: rgba(0, 100, 255, 0.2) !important;
  color: #2492ff;
  border: none;
}

::v-deep .el-table td {
  border: none;
}

::v-deep .el-table::before {
  height: 0px;
}

::v-deep .el-table tr {
  background-color: transparent !important;
  color: #b7d4f5;
}

::v-deep .el-table tbody tr:hover td {
  background-color: transparent !important;
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border: none;
}

// 显示的颜色
::v-deep .el-table .el-table__body tr.el-table__row--striped td {
  background-color: rgba(0, 50, 150, 0.1) !important;
}
</style>