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

<template>
  <div class="home-wrapper">
    <!--    <TopSearch :searchVal="searchVal" :searchType="searchType" :searchTypeArr="searchTypeArr"/>-->
    <div class="nav" stype="height:500px">
      <!--搜索框-->
      <el-row class="search-nav" style="padding: 30px 0 20px 0">
        <el-col :span="6">
          <div class="pull-left" @click="gotoHome" style="cursor: pointer">
            <img class="logo-img" src="../../assets/img/logo-blue.png"/>
            <span class="logo-title">群智众测平台</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="search-nav">
            <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="6">
          <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>
        <el-collapse accordion style="margin: 0 30px">
          <template style="color: black">
            <el-table
              ref="multipleTable"
              :data="curAgencyList"
              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.agencyPhoto" style="width: 50px; height: 50px;"/>
                </template>
              </el-table-column>
              <el-table-column
                prop="evaluationAgencyName"
                label="名称"
                align="left"
                width="300">
              </el-table-column>
              <el-table-column
                prop="address"
                align="left"
                label="地址">
              </el-table-column>
              <el-table-column
                prop="taskCount"
                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.userId)">查看详情</div>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-pagination
            v-if="curAgencyList&&curAgencyList.length"
            :page-size="9"
            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";

    export default {
        name: "AgencyList",
        components: {TopSearch},
        data() {
            return {
                isLogin: false,
                loading: false,
                searchVal: '',
                searchType: '1',
                searchTypeArr: [
                    {
                        "name": "全部",
                        "value": "all"
                    },
                    {
                        "name": "项目",
                        "value": "0"
                    },
                    {
                        "name": "机构",
                        "value": "1"
                    },
                    {
                        "name": "工具",
                        "value": "2"
                    },
                    {
                        "name": "专家",
                        "value": "3"
                    }],
                curAgencyList: [],
                activePage: 1,
                totalElements: 0
            }
        },
        methods: {
            loadData() {
                this.showLoading();
                if (storageGet('user') != null) {
                    this.isLogin = true;
                }
                this.searchVal = this.$route.params.searchVal;
                this.handleSearchData();
                this.hideLoading();
            },

            showLoading () {
                this.loading = true
            },
            hideLoading () {
                this.loading = false
            },
          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: 'Square2.0', params: {searchVal: this.searchVal, searchType: "project"}});
                } else if (this.searchType == 1) {
                    let url = '/api/agency/list/more';
                    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.curAgencyList = res.data.content;
                        this.totalElements = res.data.totalElements;
                    })
                } else if (this.searchType == 2) {
                    this.$router.push({name: 'ResourceList', params: {searchVal: this.searchVal}});
                } else if (this.searchType == 3) {
                    this.$router.push({name: 'ExpertList', params: {searchVal: this.searchVal}});
                }
            },
            goToDetail(userId) {
                this.$router.push({
                    name: 'AgencyDetail',
                    params: {id: userId, type: 0}
                })
            },
            nextPage() {
                let url = '/api/agency/list/more';
                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.curAgencyList = res.data.content;
                    this.totalElements = res.data.totalElements;
                })
            },
            gotoHome() {
                this.$router.push('/home');
            },
            handleTypeClick(tab) {
                this.searchType = tab.name
            },
            handlePageChange(index) {
                this.activePage = index;
                this.nextPage();
            }
        },
        mounted() {
            this.loadData();
        },
    }
</script>

<style scoped>
  .item-template {
    height: 80px;
  }
</style>