crowd-test-service-frontend/src/pages/HomepageSearch/ResourceList.vue

<template>
  <div class="home-wrapper">
    <!--    <TopSearch :searchVal="searchVal" :searchType="searchType" :searchTypeArr="searchTypeArr"/>-->
    <div class="nav" stype="height:500px">
      <!--搜索框-->
      <el-row class="container search-nav" style="padding: 30px 0 20px 0" :gutter="40">
        <el-col :span="5">
          <div class="pull-left to-mooctest-ranking" :style="{backgroundImage: 'url(' + mooctest_rank_logo_url + ')'}"  @click="handleLogoClick"></div>
        </el-col>
        <el-col :span="15">
          <div class="search-nav-input">
            <div id="search-block ">
              <el-tabs v-model="searchType" type="card" @tab-click="handleTypeClick">
                <el-tab-pane v-for="item in searchTypeArr" v-if="item.value!=='all'" :label="item.name"
                             :name="item.value"
                             :key="item.value"></el-tab-pane>
              </el-tabs>
              <div class="search-input">
                <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
                  <el-button class="search-button" slot="append" type="primary" @click="handleSearchData">搜索</el-button>
                </el-input>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary pull-right" class="releaseBtn" @click="checkLogin()">发布众测需求</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="container" style="margin: 20px auto;">
      <div class="create-body">
        <div class="title h2">众测资源</div>
        <template style="color: black">
          <el-table
            ref="multipleTable"
            :data="curResourceList"
            tooltip-effect="dark"
            style="width: 100%; font-size: 20px; color: black" v-loading="loading">
            <el-table-column
              label="图标"
              width="100">
              <template slot-scope="scope"><img :src="scope.row.photoUrl" style="width: 50px; height: 50px;"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              align="left"
              width="250">
            </el-table-column>
            <el-table-column
              prop="type"
              align="left"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="state"
              align="left"
              label="状态">
            </el-table-column>
            <el-table-column
              prop="unitWork"
              align="center"
              label="单位">
            </el-table-column>
            <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                <div class="btn btn-small btn-info" @click="goToDetail(scope.row.code)">查看详情</div>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-collapse accordion style="margin: 0 30px">
          <el-pagination
            v-if="curResourceList&&curResourceList.length"
            :page-size="10"
            layout="prev, pager, next"
            :total="totalElements"
            :current-page="activePage"
            @current-change="handlePageChange"
            class="pull-right"
          >
          </el-pagination>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
  import Http from '@/js/http.js';
  import TopSearch from "../../components/commons/TopSearch";
  import {storageGet} from '@/js/index.js'
  import {notify} from "../../constants";
  import Apis from '@/js/api';
  import {CONFIG} from "../../config";

  export default {
    name: "ResourceList",
    components: {TopSearch},
    data() {
      return {
        logoTitle:CONFIG.logoTitle,
        logo_transparent:CONFIG.logo_transparent,
        mooctest_rank_url: CONFIG.mooctest_rank_url,
        mooctest_rank_logo_url: CONFIG.mooctest_rank_logo_url,
        user: {},
        isLogin: false,
        loading: false,
        searchVal: '',
        curResourceList: [],
        searchType: '2',
        searchTypeArr: [
          {
            "name": "全部",
            "value": "all"
          },
          {
            "name": "项目",
            "value": "0"
          },
          {
            "name": "机构",
            "value": "1"
          },
          {
            "name": "资源",
            "value": "2"
          },
          {
            "name": "专家",
            "value": "3"
          }],
        activePage: 1,
        totalElements: 0
      }
    },
    methods: {
      loadData() {
        if (storageGet('user') != null) {
          this.isLogin = true;
        }
        this.searchVal = this.$route.params.searchVal;
        this.handleSearchData();
      },
      handleLogoClick(){
        window.open(this.mooctest_rank_url, "_blank");
      },
      checkLogin() {
        this.checkCreateProjectAuth();
      },
      checkCreateProjectAuth() {
        if (!this.isLogin) {
          console.log("请登录后访问");
          notify('warning', '请登录后访问');
        } else if (this.isLogin) {
          Http.get(Apis.USER.IS_PART.replace('{userId}', this.user.id)).then((res) => {
            this.$router.push('/project/create');
          }).catch((error) => {
            notify('error', error.data)
          })
        }
      },
      handleSearchData() {

        if (this.searchType == 0) {
          this.$router.push({
            name: 'Square',
            params: {searchVal: this.searchVal, searchType: "project", currTab: "project"}
          });
        } else if (this.searchType == 1) {
          this.$router.push({name: 'AgencyList', params: {searchVal: this.searchVal}});
        } else if (this.searchType == 2) {
          let url = '/api/common/index/page';
          let params = {
            "keyword": this.searchVal,
            "activePage": 1,
            "columnFilters": [
              {
                "field": "type",
                "type": "enums",
                "enums": this.searchTypeArr,
                "value": this.searchType
              }
            ]
          };
          Http.post(url, params).then((res) => {
            this.curResourceList = res.data.resourcePage.content;
            this.totalElements = res.data.resourcePage.totalElements;
          })
        } else if (this.searchType == 3) {
          this.$router.push({name: 'ExpertList', params: {searchVal: this.searchVal}});
        }
      },
      nextPage() {
        let url = '/api/common/index/page';
        let params = {
          "keyword": this.searchVal,
          "activePage": this.activePage,
          "columnFilters": [
            {
              "field": "type",
              "type": "enums",
              "enums": this.searchTypeArr,
              "value": this.searchType
            }
          ]
        };
        Http.post(url, params).then((res) => {
          this.curResourceList = res.data.resourcePage.content;
          this.totalElements = res.data.resourcePage.totalElements;
        })
      },
      gotoHome() {
        this.$router.push('/home');
      },
      handleTypeClick(tab) {
        this.searchType = tab.name
      },
      handlePageChange(index) {
        this.activePage = index;
        this.nextPage();
      },
      goToDetail(code) {
        this.$router.push({
          name: 'ResourceDetail',
          path:'/resource/detail',
          query: {id: code}
        })
      },
      showLoading() {
        this.loading = true
      },
      hideLoading() {
        this.loading = false
      },
      setUserInfo() {
        this.user = storageGet('user') && storageGet('user').userVO;
      }
    },
    mounted() {
      this.setUserInfo();
      this.loadData();
    }
  }
</script>

<style lang="scss">
  @import "../../style/search-nav.scss";
  .item-template {
    height: 80px;
  }
</style>