labsop_website/src/views/equipment/index.vue

<template>
  <div class="instr-container">
    <div class="search-wrap">
      <div class="search-item">
        <div class="input-item">
          <el-input
            class="mr20"
            v-model="searchForm.searchText"
            placeholder="请输入仪器名称"
            clearable
            style="height: 48px"
          />
          <el-button type="primary" style="width: 90px" @click="globalSearch">
            搜索
          </el-button>
        </div>
      </div>
    </div>
    <div class="common-container">
      <section class="section-container">
        <div class="filter-wrap">
          <div class="filter-item dept-wrap">
            <!-- 实验室管理的实验室 -->
            <div class="left-tit">所属平台</div>
            <div class="right-filter-content">
              <div
                class="more-item"
                @click="handleExpandFilter('plat')"
                v-if="laboratoryNameOptions.length > 8"
              >
                <span>{{ platFilterExpand ? "收起" : "更多" }}</span>
                <i v-if="!platFilterExpand" class="el-icon-caret-top"></i>
                <i v-else class="el-icon-caret-bottom"></i>
              </div>
              <div class="list">
                <div
                  @click="selectFilterItem(v.name, 'laboratoryName')"
                  class="name"
                  :class="{ avtive: searchForm.laboratoryName == v.name }"
                  v-for="(v, i) in laboratoryNameOptions"
                  v-show="!platFilterExpand ? i < 8 : i > -1"
                  :key="i"
                >
                  {{ `${v.name}(${v.count}台)` }}
                </div>
                <!-- <div class="dragger-container" v-if="platFilterExpand">
                  <div class="dragger-bar"></div>
                </div> -->
              </div>
            </div>
          </div>
          <div class="filter-item address">
            <!-- 仪器类别 -->
            <div class="left-tit">仪器类别</div>
            <div class="right-filter-content">
              <div
                class="more-item"
                @click="handleExpandFilter('instrType')"
                v-if="instClassDescOptions.length > 8"
              >
                <span>{{ instrTypeFilterExpand ? "收起" : "更多" }}</span>
                <i v-if="!instrTypeFilterExpand" class="el-icon-caret-top"></i>
                <i v-else class="el-icon-caret-bottom"></i>
              </div>
              <div class="list">
                <div
                  @click="selectFilterItem(v.name, 'instClassDesc')"
                  class="name"
                  :class="{ avtive: searchForm.instClassDesc == v.name }"
                  v-for="(v, i) in instClassDescOptions"
                  v-show="!instrTypeFilterExpand ? i < 8 : i > -1"
                  :key="i"
                >
                  {{ `${v.name}(${v.count}台)` }}
                </div>
                <!-- <div class="dragger-container" v-if="instrTypeFilterExpand">
                  <div class="dragger-bar"></div>
                </div> -->
              </div>
            </div>
          </div>
          <div class="filter-item type">
            <!-- 从前两个查询条件查询 -->
            <div class="left-tit">仪器型号</div>
            <div class="right-filter-content">
              <div class="list">
                <div
                  @click="selectFilterItem(v.name, 'instNameEn')"
                  class="name"
                  :class="{ avtive: searchForm.instNameEn == v.name }"
                  v-for="(v, i) in instNameEnOptions"
                  v-show="!instrTypeFilterExpand ? i < 8 : i > -1"
                  :key="i"
                >
                  {{ `${v.name}(${v.count}台)` }}
                </div>
                <!-- <div class="dragger-container" v-if="instrTypeFilterExpand">
                  <div class="dragger-bar"></div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="instr-list">
          <div class="filter-result">
            <h4 class="title">已选条件</h4>
            <div class="filter-wrap">
              <el-tag
                v-if="searchForm.laboratoryName"
                type="primary"
                size="normal"
                closable
                @close="closeTag('laboratoryName')"
                class="mr20"
              >
                {{ searchForm.laboratoryName }}
              </el-tag>
              <el-tag
                v-if="searchForm.instClassDesc"
                type="success"
                size="normal"
                closable
                @close="closeTag('instClassDesc')"
                class="mr20"
              >
                {{ searchForm.instClassDesc }}
              </el-tag>
              <el-tag
                v-if="searchForm.instNameEn"
                type="warning"
                size="normal"
                closable
                @close="closeTag('instNameEn')"
              >
                {{ searchForm.instNameEn }}
              </el-tag>
            </div>
          </div>
          <el-empty
            v-if="instrDataList.length == 0"
            description="很抱歉，没有找到相关的仪器~"
          ></el-empty>
          <div v-else>
            <div class="instr-item" v-for="v in instrDataList" :key="v.id">
              <div class="img-item">
                <img :src="v.instPicture" style="width: 100%" alt="" />
              </div>
              <div class="text-item">
                <p class="name">{{ v.instName }}</p>
                <div class="info">
                  <div class="info-title">型号</div>
                  <div class="info-txt">{{ v.instNameEn }}</div>
                </div>
                <div class="info">
                  <div class="info-title">状态</div>
                  <div class="info-txt">
                    <span v-if="v.instStatus == '10'">正常</span>
                    <span v-if="v.instStatus == '20'">故障</span>
                    <span v-if="v.instStatus == '30'">报废</span>
                  </div>
                </div>
                <div class="info">
                  <div class="info-title">仪器负责人</div>
                  <div class="info-txt">{{ v.instHeadName }}</div>
                </div>
                <div class="info">
                  <div class="info-title">放置地点</div>
                  <div class="info-txt">
                    <span :title="v.placeAddress">
                      {{ v.placeAddress || "-" }}
                      <span v-if="v.laboratoryName">
                        ({{ v.laboratoryName }})
                      </span>
                    </span>
                  </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>
    <appoint ref="appointRef"></appoint>
  </div>
</template>

<script>
  import to from "await-to-js";
  import { getToken } from "@/utils/auth";
  import { Loading } from "element-ui";
  import { getInstrList, getInstNameEnCount } from "@/api/instr/index";
  import appoint from "./components/appoint.vue";
  export default {
    name: "equipment",
    components: { appoint },
    data() {
      return {
        platFilterExpand: false,
        instrTypeFilterExpand: false,
        searchForm: {
          searchText: "",
          laboratoryName: "",
          instClassDesc: "",
          instNameEn: "",
          pageNum: 1,
          pageSize: 10,
        },
        total: 0,
        instrDataList: [],
        laboratoryNameOptions: [],
        instClassDescOptions: [],
        instNameEnOptions: [],
        options: {
          text: "正在加载中，请稍后...",
          background: "rgba(0, 0, 0, 0.6)",
        },
      };
    },
    created() {},

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

    methods: {
      handleAppoint(row) {
        const token = getToken();
        if (!token) {
          return this.$router.push("/login");
        }
        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));
        if (err) return;
        if (res.code == 200) {
          this.instrDataList = 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();
        }
        setTimeout(() => {
          Loading.service(this.loadingOption).close();
        });
      },
      // 对象转数组
      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-banner.png") center;
    }
    .search-item {
      width: 800px;
      height: 240px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .input-item {
        width: 100%;
        height: 40px;
        display: flex;
      }
    }
  }
  .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;
        }
      }
    }
  }
  .filter-result {
    padding: 15px 18px 0 18px;
    display: flex;
    border: 1px solid rgba(112, 112, 112, 0.06);
    position: relative;
    .title {
      width: 120px;
      font-size: 16px;
      color: #666;
      font-weight: 700;
      padding-right: 18px;
      padding-top: 3px;
      flex: 0 0 120px;
    }
    .filter-wrap {
      min-height: 45px;
      padding-right: 80px;
    }
  }
  .instr-list {
    background: #fff;
    border-radius: 6px;
    margin-top: 20px;
    min-height: 200px;
    .instr-item {
      padding: 24px 30px;
      margin: 0 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;
        .name {
          font-weight: bold;
          font-size: 20px;
          margin-bottom: 12px;
        }
        .info {
          color: #666;
          display: flex;
          font-size: 14px;
          margin-bottom: 8px;
          .info-title {
            width: 80px;
          }
          .info-txt {
            width: 0;
            flex: 1;
          }
        }
      }
      .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>