labsop_website/src/views/technical/service.vue

<template>
  <div class="instr-container">
    <div class="search-wrap"></div>
    <div class="common-container">
      <section class="section-container">
        <div class="service-list">
          <div class="service-list-header">
            <h4 class="title">技术服务</h4>
          </div>
          <el-empty
            v-if="serviceDataList.length == 0"
            description="很抱歉，没有找到相关的技术服务~"
          ></el-empty>
          <div v-else>
            <div class="flex list-header">
              <div>共{{ serviceDataList.length }}项技术服务</div>
              <div class="btn" @click="handleAppoint">
                需求提报({{ needList.length }})
              </div>
            </div>
            <div class="instr-item" v-for="v in serviceDataList" :key="v.id">
              <div class="img-item">
                <img
                  src="../../assets/img/service.png"
                  style="width: 100%"
                  alt=""
                />
              </div>
              <div class="text-item">
                <p class="name">{{ v.name }}</p>
                <div class="info" style="flex: 1">
                  <div class="info-txt">{{ v.content }}</div>
                </div>
                <div class="info">
                  <div class="info-title">技术服务平台：</div>
                  <div class="info-txt">
                    <div>{{ v.plat }} - {{ v.user }}</div>
                    <div class="btns flex">
                      <div class="btn btn1" @click="openDetail(v)">详情</div>
                      <div class="btn btn2" @click="joinNeedList(v.id)">
                        加入需求
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="appoint-item">
                <div class="mb20">
                  <el-button
                    type="primary"
                    size="default"
                    v-if="v.instStatus == '10' && v.isAppointment == '10'"
                    @click="handleAppoint(v)"
                  >
                    使用预约
                  </el-button>
                </div>
                <div>
                  <el-button
                    type="primary"
                    plain
                    size="default"
                    @click="linkToDetails(v)"
                  >
                    查看详情
                  </el-button>
                </div>
              </div> -->
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchForm.pageNum"
              :page-sizes="[10, 50, 100]"
              :page-size="searchForm.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </section>
    </div>
    <appointEdit ref="appointRef" ></appointEdit>
  </div>
</template>

<script name="service-detail">
  import to from "await-to-js";
  import { getToken } from "@/utils/auth";
  import { Loading } from "element-ui";
  import { getInstrList, getInstNameEnCount } from "@/api/instr/index";
  import appointEdit from "./components/edit.vue";
  export default {
    name: "equipment",
    components: { appointEdit },
    data() {
      return {
        platFilterExpand: false,
        instrTypeFilterExpand: false,
        searchForm: {
          searchText: "",
          laboratoryName: "",
          instClassDesc: "",
          instNameEn: "",
          pageNum: 1,
          pageSize: 10,
        },
        needList: [],
        total: 4,
        serviceDataList: [
          {
            id: 1,
            name: "Western Blot相关实验",
            content:
              "Western Blot（蛋白质印迹法）是一种广泛应用于分子生物学、生物化学和免疫遗传学中的实验技术，用于检测样品中特定蛋白质的存在、大小和表达量。包含样品制备、SDS - PAGE 电泳、蛋白质转印、抗体孵育、检测与分析等步骤。",
            plat: "细胞平台",
            user: "张老师",
          },
          {
            id: 2,
            name: "高效液相色谱实验",
            content:
              "高效液相色谱（High - Performance Liquid Chromatography，HPLC）实验是一种重要的分离分析技术，广泛应用于化学、生物、医药等众多领域，用于分离、鉴定和定量分析各种复杂混合物中的化学成分。",
            plat: "光学平台",
            user: "张老师",
          },
          {
            id: 3,
            name: "核酸提取扩增相关实验",
            content:
              "核酸包括 DNA 和 RNA，提取的基本原理是利用核酸与其他细胞成分在物理和化学性质上的差异进行分离。",
            plat: "分子平台",
            user: "张老师",
          },
          {
            id: 4,
            name: "组织与病理学相关实验",
            content:
              "组织样本采集是组织与病理学实验的基础。目的是获取能够代表病变或正常组织特征的样本，用于后续的病理诊断和研究。采集过程需要遵循无菌、快速、准确的原则。",
            plat: "病理平台",
            user: "张老师",
          },
        ],
        laboratoryNameOptions: [],
        instClassDescOptions: [],
        instNameEnOptions: [],
        options: {
          text: "正在加载中，请稍后...",
          background: "rgba(0, 0, 0, 0.6)",
        },
      };
    },
    created() {},

    mounted() {
      // this.getInstrData();
    },

    methods: {
      openDetail(row) {
        console.log(row);
        this.$router.push("/technical/service-detail");
      },
      joinNeedList(id) {
        this.needList.push(id);
        this.needList = [...new Set(this.needList)];
        this.$message.success("加入成功");
      },
      handleAppoint() {
        this.$refs.appointRef.openDialog();
        // const token = getToken();
        // if (!token) {
        //   return this.$router.push("/login?redirect=/appointment/equipment");
        // }
        // this.$refs.appointRef.openDialog(row);
      },
      // 获取型号数量
      async getInstNameEnCountData() {
        const params = {
          instClassDesc: this.searchForm.instClassDesc,
          laboratoryName: this.searchForm.laboratoryName,
          searchText: this.searchForm.searchText,
        };
        const [err, res] = await to(getInstNameEnCount(params));
        if (err) return;
        if (res.code == 200) {
          this.instNameEnOptions = res.data;
        }
      },
      // 上方搜索查询
      async globalSearch() {
        this.searchForm.pageNum = 1;
        this.searchForm.instClassDesc = "";
        this.searchForm.laboratoryName = "";
        this.searchForm.instNameEn = "";
        this.getInstrData();
      },
      async getInstrData() {
        // Loading.service(this.loadingOption);
        // const [err, res] = await to(getInstrList(this.searchForm));
        // setTimeout(() => {
        //   Loading.service(this.loadingOption).close();
        // });
        // if (err) return;
        // if (res.code == 200) {
        //   this.serviceDataList = res.data.list;
        //   this.total = res.data.total;
        //   this.laboratoryNameOptions = this.objTransforArr(
        //     res.data.count.laboratoryName
        //   );
        //   this.instClassDescOptions = this.objTransforArr(
        //     res.data.count.instClassDesc
        //   );
        //   this.getInstNameEnCountData();
        // }
      },
      // 对象转数组
      objTransforArr(obj) {
        const arr = Object.entries(obj).map(([key, value]) => ({
          name: key,
          count: value,
        }));
        return arr;
      },
      // 删除查询条件
      closeTag(type) {
        switch (type) {
          case "laboratoryName":
            this.searchForm.laboratoryName = "";
            break;
          case "instClassDesc":
            this.searchForm.instClassDesc = "";
            break;
          case "instNameEn":
            this.searchForm.instNameEn = "";
            break;
        }
        this.searchForm.pageNum = 1;
        this.getInstrData();
      },
      // 展开 合并
      handleExpandFilter(type = "plat" | "instrType") {
        if (type === "plat") {
          this.platFilterExpand = !this.platFilterExpand;
        } else if (type === "instrType") {
          this.instrTypeFilterExpand = !this.instrTypeFilterExpand;
        }
      },
      // 选择查询条件
      selectFilterItem(name, val) {
        switch (val) {
          case "laboratoryName":
            if (this.searchForm.laboratoryName != name) {
              this.searchForm.laboratoryName = name;
              this.searchForm.pageNum = 1;
              this.getInstrData();
            }
            break;
          case "instClassDesc":
            if (this.searchForm.instClassDesc != name) {
              this.searchForm.instClassDesc = name;
              this.searchForm.pageNum = 1;
              this.getInstrData();
            }
            break;
          case "instNameEn":
            if (this.searchForm.instNameEn != name) {
              this.searchForm.instNameEn = name;
              this.searchForm.pageNum = 1;
              this.getInstrData();
            }
            break;
        }
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getInstrData();
      },
      handleCurrentChange(val) {
        this.searchForm.pageNum = val;
        this.getInstrData();
      },
      linkToDetails(v) {
        this.$router.push("/appointment/equipment-details?id=" + v.id);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .search-wrap {
    width: 100%;
    height: 240px;
    position: relative;
    &::after {
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: url("../../assets/img/equipment-banner1.png") center;
      background-size: 100% 240px;
    }
  }
  .section-container {
    width: 1200px;
    margin: 0 auto;
  }
  .filter-wrap {
    width: 100%;
    .filter-item {
      width: 100%;
      min-height: 48px;
      display: flex;
      border-bottom: 2px dashed rgba(112, 112, 112, 0.18);
      &:last-child {
        border-bottom: none;
      }
    }

    .left-tit {
      width: 120px;
      background: #f1f1f1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    .right-filter-content {
      flex: 1;
      padding: 9px 24px 9px 36px;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      .list {
        max-height: 120px;
        overflow: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        // &::-webkit-scrollbar {
        //   display: none;
        // }
        .dragger-container {
          position: absolute;
          width: 6px;
          top: 36px;
          right: 34px;
          height: 84px;
          background: #ccc;
          border-radius: 20px;
          .dragger-bar {
            position: absolute;
            width: 6px;
            height: 60px;
            top: 0px;
            border-radius: 20px;
            background: rgba(0, 0, 0, 0.75);
          }
        }
      }
      .name {
        font-size: 14px;
        margin: 5px 30px 5px 0;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
          color: #1677ff;
        }
        &.avtive {
          text-decoration: underline;
          color: #1677ff;
        }
      }
      .more-item {
        position: absolute;
        top: 12px;
        right: 0;
        padding-right: 16px;
        font-size: 14px;
        cursor: pointer;
        z-index: 2;
        i {
          color: #b1b1b1;
        }
      }
    }
  }
  .service-list-header {
    padding: 15px 18px;
    display: flex;
    border: 1px solid rgba(112, 112, 112, 0.06);
    position: relative;
    .title {
      width: 120px;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      padding-right: 18px;
      padding-top: 3px;
      flex: 0 0 120px;
    }
    .filter-wrap {
      min-height: 45px;
      padding-right: 80px;
    }
  }
  .service-list {
    background: #fff;
    border-radius: 6px;
    margin-top: 20px;
    min-height: 200px;
    .list-header {
      padding: 12px 30px 10px;
      border-bottom: 1px solid rgba(112, 112, 112, 0.06);
      align-items: center;
      justify-content: space-between;
      .btn {
        cursor: pointer;
        background: #facd91;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        padding: 8px 50px;
      }
    }
    .instr-item {
      padding: 24px 30px;
      display: flex;
      border-bottom: 1px solid rgba(112, 112, 112, 0.06);
      .img-item {
        width: 180px;
        height: 180px;
        border-radius: 6px;
        overflow: hidden;
        margin-right: 18px;
        position: relative;
        background: #f3f6fb;
      }
      .text-item {
        flex: 1;
        width: 0;
        font-size: 14px;
        padding-top: 6px;
        display: flex;
        flex-direction: column;
        .name {
          font-weight: bold;
          font-size: 20px;
          margin-bottom: 12px;
        }
        .info {
          color: #666;
          display: flex;
          font-size: 14px;
          margin-bottom: 8px;
          .info-title {
            width: 100px;
          }
          .info-txt {
            width: 0;
            flex: 1;
            position: relative;
            .btns {
              position: absolute;
              right: 0;
              top: -8px;
            }
            .btn {
              width: 90px;
              padding: 8px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              &.btn1 {
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
                background: #facd91;
              }
              &.btn2 {
                color: #fff;
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
                background: #1c9bfd;
              }
            }
          }
        }
      }
      .appoint-item {
        width: 120px;
        padding: 0 0 0 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .pagination {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  div {
    color: #333;
  }
</style>