green.v0.3/src/views/NewPlatform/Children/Share.vue

<template>
  <div>
    <sen-nav />
    <div class="inner">
      <bread-crumb :arr="arr" />
    </div>
    <div>
      <div class="search-background">
        <div class="d-flex">
          <div class="flex-3 flex-wrap">
            <span class="ins-title">研究开发实验室：</span>
            <span
              v-for="(item, index) in laboratory"
              :key="index"
              :class="item.isActive ? 'act-color' : ''"
              class="ins-name"
              @click="choose(index, 0)"
            >
              {{ item.name }}
            </span>
          </div>
          <div class="flex-1 align-center">
            <a-input-search class="item-search" v-model="LabIpt" placeholder="搜索实验室" enter-button="搜索" @search="searchLab" />
          </div>
        </div>
        <div style="border-top: 1px solid rgba(0, 0, 0, 0.06)" class="flex-3 flex-wrap">
          <div class="flex-3 flex-wrap">
            <span class="ins-title">大型科研设施与仪器：</span>
            <span
              v-for="(item, index) in instrument"
              :key="index"
              :class="item.isActive ? 'act-color' : ''"
              class="ins-name"
              @click="choose(index, 1)"
            >
              {{ item.name }}
            </span>
          </div>
          <div class="flex-1 align-center">
            <a-input-search class="item-search" v-model="InsIpt" placeholder="搜索仪器" enter-button="搜索" @search="searchIns" />
          </div>
        </div>
      </div>
    </div>
    <platform-list />
  </div>
</template>

<script>
import { selModel } from 'config/api';
import PlatformList from 'components/PlatformList/PlatformList.vue';
import SenNav from './components/SenNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
import { mapMutations } from 'vuex';
export default {
  name: 'Share',
  components: { SenNav, PlatformList, BreadCrumb },
  data() {
    return {
      str: '这是科技资源开放共享服务平台',
      title: '科技资源开放共享服务平台',
      typeOfPlatform: '创新平台',
      arr: [
        { name: '创新平台', url: '/NewPlatform/NewCore' },
        { name: '创新资源平台', url: '/NewPlatform/News' },
        { name: '科技资源开放共享服务平台', url: '' },
      ],
      LabIpt: '', // 实验室搜索框内容
      laboratory: [], // 实验室
      labList: [], // 实验室类型选择列表
      InsIpt: '', // 仪器搜索框内容
      instrument: [], // 仪器
      insList: [], // 仪器类型选择列表
    };
  },
  watch: {
    LabIpt(val) {
      const obj = {
        content: this.LabIpt,
        isBtn: 0,
      };
      this.setLabIpt(obj);
    },
    InsIpt(val) {
      const obj = {
        content: this.InsIpt,
        isBtn: 0,
      };
      this.setInsIpt(obj);
    },
  },
  created() {
    const obj = {
      content: '',
      isBtn: 0,
    };
    this.setLabList([]);
    this.setInsList([]);
    this.setLabIpt(obj);
    this.setInsIpt(obj);
    this.getType(1);
    this.getType(2);
  },
  methods: {
    ...mapMutations('home', ['setLabList', 'setInsList', 'setLabIpt', 'setInsIpt', 'setListState']),
    async getType(num) {
      try {
        const params = { param: { model: num } };
        const res = await selModel(params);
        const { code, mst, data } = res.data;
        if (code === 200) {
          if (num === 1) {
            this.instrument = data;
            for (let i = 0; i < this.instrument.length; i++) {
              this.instrument[i].isActive = false;
            }
          } else if (num === 2) {
            this.laboratory = data;
            for (let i = 0; i < this.laboratory.length; i++) {
              this.laboratory[i].isActive = false;
            }
          }
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 选中类型时触发
    choose(index, num) {
      const that = this;
      if (num === 0) {
        this.labList = [];
        const { laboratory, instrument } = this;
        for (let i = 0; i < instrument.length; i++) {
          instrument[i].isActive = false;
        }
        this.setListState(0);
        laboratory[index].isActive = !laboratory[index].isActive;
        this.laboratory = [...laboratory];
        for (let i = 0; i < laboratory.length; i++) {
          if (laboratory[i].isActive) {
            this.labList.push(laboratory[i].id);
          }
        }
        this.setLabList(this.labList);
      } else if (num === 1) {
        this.insList = [];
        const { laboratory, instrument } = this;
        for (let i = 0; i < laboratory.length; i++) {
          laboratory[i].isActive = false;
        }
        this.setListState(1);
        instrument[index].isActive = !instrument[index].isActive;
        this.instrument = [...instrument];
        for (let i = 0; i < instrument.length; i++) {
          if (instrument[i].isActive) {
            this.insList.push(instrument[i].id);
          }
        }
        this.setInsList(this.insList);
      }
    },
    searchLab() {
      const { instrument } = this;
      for (let i = 0; i < instrument.length; i++) {
        instrument[i].isActive = false;
      }
      this.instrument = [...instrument];
      this.setListState(0);
      this.InsIpt = '';
      const obj = {
        content: this.LabIpt,
        isBtn: 1,
      };
      this.setLabIpt(obj);
    },
    searchIns() {
      const { laboratory } = this;
      for (let i = 0; i < laboratory.length; i++) {
        laboratory[i].isActive = false;
      }
      this.laboratory = [...laboratory];
      this.setListState(1);
      this.LabIpt = '';
      const obj = {
        content: this.InsIpt,
        isBtn: 1,
      };
      this.setInsIpt(obj);
    },
  },
};
</script>

<style lang="stylus" scoped>
.inner {
  margin: 10px auto 15px;
}

.search-background {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  height: auto;
  padding: 0 20px;
  width: 82%;
  margin: 40px auto;
  line-height: 44px;
}

.item-search {
  width: 100%;
  height: 32px;
}

.ins-title {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
}

.ins-name {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  padding: 0 10px;
  cursor: pointer;
}

.act-color {
  color: #13ACC4 !important;
}
</style>