diagnosis.admin/src/views/business/DrugMapList.vue

<template>
  <div class="druglist">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <span>映射状态：</span>
          <div class="input">
            <el-select size="mini" placeholder="请选择" v-model="isMap">
              <el-option :value="0" label="未映射"></el-option>
              <el-option :value="1" label="已映射"></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>平台药品名称：</span>
          <div class="input">
            <el-input size="mini" placeholder="请输入药品名称" v-model="yigt"></el-input>
          </div>
        </div>

        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="$router.push({path:'/index/drugmap?pid='+$route.query.id+'&isMapping='+isMap})"
        >新增</el-button>
        <el-button type="warning" size="mini" @click="$router.back()">返回</el-button>
      </div>
    </div>

    <!-- 底部表格数据 -->
    <div class="table">
      <div class="today-table">
        <div class="table-container">
          <el-table :data="tableData" stripe style="width: 100%" border height="100%">
            <el-table-column prop="id" label="序号" width="100"></el-table-column>
            <el-table-column label="平台药品">
              <el-table-column prop="name" label="药品名称"></el-table-column>
              <el-table-column prop="dw" label="单位"></el-table-column>
              <!-- <el-table-column prop="drugRemark" label="药品描述">
              </el-table-column>-->
            </el-table-column>
            <el-table-column label="第三方药品">
              <el-table-column prop="name" label="药品名称">
                <template slot-scope="scope">
                  <div class="hisName">
                    <span
                      v-for="(item,index) in scope.row.orgDrugs"
                      :key="index"
                    >{{item.name}}{{index==scope.row.orgDrugs.length-1?'':'/'}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="规格">
                <template slot-scope="scope">
                  <div>
                    <span
                      v-for="(item,index) in scope.row.orgDrugs"
                      :key="index"
                    >{{item.gg}}{{index==scope.row.orgDrugs.length-1?'':'/'}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="drugRemark" label="单位">
                <template slot-scope="scope">
                  <div>
                    <span
                      v-for="(item,index) in scope.row.orgDrugs"
                      :key="index"
                    >{{item.dw}}{{index==scope.row.orgDrugs.length-1?'':'/'}}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div class="flex-center operation">
                  <div
                    class="flex-center"
                    @click="$router.push({path:'/index/drugmap?id='+scope.row
                                    .matDrugId+'&pid='+$route.query.id+'&isMapping='+isMap})"
                  >编辑</div>
                  <!-- <div class="flex-center bg-yellow">删除
                  </div>-->
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex-vertical-center-r today-page">
          <el-pagination
            background
            layout=" prev, pager, next, jumper, total"
            :total="total"
            :page-size="limit"
            @current-change="sizeC($event)"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import popup from "@/components/Propup.vue";
import { getDrugMapList, getDrugBM } from "@/api/business.js";
import { doctorBodySelect } from "@/api/city.js";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  components: {
    popup
  },
  data() {
    return {
      doctorBody: [], // 医共体选择器数据
      yigt: "", // 医工体
      tableData: [],
      page: 1,
      limit: 10,
      total: 0,
      isMap: 1
    };
  },
  created() {
    this.getDrugMapList();
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // 可以通过传一个回调给 next 来访问组件实例
    next(vm => {
      // 通过 `vm` 访问组件实例
      vm.getDrugMapList();
    });
  },
  methods: {
    sizeC(e) {
      this.page = e;
      this.getDrugMapList();
    },
    search() {
      this.page = 1;
      this.getDrugMapList();
    },
    // 清空搜索条件
    clearFilter() {
      this.yigt = "";
      this.getDrugMapList();
    },
    doctorBodyC() {
      // this.page = 1
      // this.getDrugList()
    },

    // 获取药品列表
    async getDrugMapList() {
      let params = {
        page: this.page,
        limit: this.limit,
        isMapping: this.isMap,
        // orgId: this.getuserinfo.organizationid,
        matName: this.yigt,
        orgId: this.$route.query.id
      };
      let res = await getDrugMapList(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;
        this.tableData.filter((item, index) => {
          item.id = index + 1;
          item.type = "his";
          return item;
        });
      }
    }
  },

  computed: {
    ...mapGetters(["getuserinfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.table {
  padding: 5px 5px;
  background: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
  height: 72vh;

  .table-btns {
    margin-bottom: 13px;

    div {
      width: 74px;
      height: 36px;
      background: #5386f6;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 7px;
    }

    .bg-yellow {
      background: #ffae45;
    }

    .bg-red {
      background: #ff6245;
    }
  }

  .table-container {
    height: 90%;
  }

  .today-table {
    height: 100%;

    .operation {
      div {
        width: 60px;
        height: 24px;
        background: #5386f6;
        border-radius: 2px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
      }

      .bg-yellow {
        // width: 80px;
        height: 24px;
        background: #ffae45;
        margin-left: 21px;
        margin-right: 21px;
      }

      .bg-red {
        background: #ff6245;
      }
    }
  }
}

.hisName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.today-table::v-deep .el-table .cell {
  text-align: center;
}

.today-table::v-deep .el-table thead.is-group th {
  background: #f3fffb;
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .table {
    height: 82vh;

    .table-container {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .table {
    height: 81vh;

    .table-container {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .table {
    height: 73vh;

    .table-container {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .table {
    height: 74vh;

    .table-container {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}
</style>