LiaoningYaopinIframe/src/views/firmContent/drugInfo/zhaohui/drugDetail.vue

<template>
  <div>
    <!-- <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="75%"
      :close-on-click-modal="true"
      :destroy-on-close="true"
      :append-to-body="true"
    >
      <div slot="title" class="headerText">详情</div> -->
    <div class="content-tabs">
      <div class="tabs">
        <div class="tab" v-for="(item, index) in options" :key="index" @click="actionTab(index)"
          :class="action == index ? 'actionTab' : ''">
          {{ item }}
        </div>
      </div>
    </div>

    <div v-if="action == 0">
      <div class="mar">
        <headerTitle header="国家药品抽检信息"></headerTitle>
      </div>
      <descriptions :descriptionsList="list1"></descriptions>
    </div>
    <div v-if="action == 1">
      <div class="mar">
        <headerTitle header="检验项目信息"></headerTitle>
      </div>
      <el-table v-loading="loading" :data="tableList" border :stripe="false">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column label="检验大类" prop="name" />
        <el-table-column label="检验项目" prop="type"> </el-table-column>

        <el-table-column label="标准规定" prop="num" />
        <el-table-column label="检验结果" prop="enterpriseName">
        </el-table-column>
        <el-table-column label="检验结论" prop="num" />
        <el-table-column label="检验依据" prop="enterpriseName">
        </el-table-column>
        <el-table-column label="检验序号" prop="num" />
        <el-table-column label="报告类别" prop="enterpriseName">
        </el-table-column>
        <el-table-column label="抽样编号" prop="enterpriseName">
        </el-table-column>
        <el-table-column label="药品通用名" prop="enterpriseName">
        </el-table-column>
        <el-table-column label="编辑时间" prop="enterpriseName">
        </el-table-column>
        <el-table-column label="更新时间" prop="enterpriseName">
        </el-table-column>
      </el-table>
      <div class="pagination">
        <span class="custom">共100条，显示1条</span>
        <el-pagination background @current-change="currentChange" @size-change="sizeChange" :page-sizes="[10, 5]"
          layout=" prev, pager, next, sizes, jumper" :total="querydata.total">
        </el-pagination>
      </div>
    </div>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import headerTitle from "@/views/firmContent/components/headerTitle";
import descriptions from "@/views/components/descriptions.vue";
export default {
  data() {
    return {
      dialogVisible: false,
      action: 0,
      options: ["基本信息", "检验项目"],
      loading: false,
      tableList: [
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "药品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
      ],
      querydata: {
        total: 11,
      },
      list1: [
        {
          span: 1,
          label: "药品通用名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "药品商品名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "药品批准文号",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "药品类别",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "药品上市许可持有人",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "药品上市许可持有人统一社会信用代码",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "药品上市许可持有人地址",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "药品上市持有人所在省份",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "剂型",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "制剂规格",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "包装规格",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样编号",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样数量",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "有效期",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "来源",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样环节",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "批号",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "有效期截至日期",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "被抽样单位统一社会信用代码",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "被抽样单位名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "被抽样单位地址",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样地点性质",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样单位名称全称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样单位所在省份",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "药品单价",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "药品总价",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "生产日期",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "样品存放现场温度",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "样品存放现场湿度",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样日期",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样级别",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样单位经手人",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "承检机构",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "生产企业是否否认生产",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "基本药物 ",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "抽样任务",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "最终检验结论",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "检验证书编号",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "报告签发日期",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "复检结论",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "复检检验依据",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "复检报告书编号",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "复检报告签发日期",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "收样或退样日期",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "原检结论",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "补充检验结果",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "计划ID",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "计划名称",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "编辑时间",
          value: "",
          data: "",
        },
        {
          span: 1,
          label: "更新时间",
          value: "",
          data: "",
        },
      ],
    };
  },
  components: {
    descriptions,
    headerTitle,
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    actionTab(e) {
      this.action = e;
    },
    currentChange() { },
    sizeChange() { },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background: #f8f9fa;
}

.headerText {
  color: #333333;
}

.header--title {
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title--left {
    display: flex;
    align-items: center;

    .line {
      width: 4px;
      height: 16px;
      background: #1e80eb;
      margin-right: 8px;
    }

    .title {
      font-size: vb(18);
      font-weight: bold;
      color: #1e80eb;
    }
  }
}

.mar {
  margin: 10px 0;
}

::v-deep .el-descriptions-row>th {
  width: 18%;
  background: #f5f7fa;
  color: #292f38;
  font-weight: 500;
}

::v-deep .el-descriptions-row>td {
  width: 32%;
}

::v-deep .el-dialog:not(.is-fullscreen) {
  margin-bottom: 1vh !important;
}

.content-tabs {
  .tabs {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #dbe0e8;

    .tab {
      border: 1px solid #dbe0e8;
      background: #f8f9f9;
      color: #292f38;
      padding: 7px 18px;
      display: flex;
      align-items: center;
      border-bottom: none;
      margin-right: 7px;
      cursor: pointer;

      &:last-child {
        margin-right: 0;
      }
    }

    .actionTab {
      background-color: #1e80eb;
      color: #fff;
    }
  }
}

.pagination {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}
</style>