add:temp search

src/components/commons/SearchBar.vue

@@ -11,7 +11,7 @@
       <el-col :span="12">
         <div class="search-nav">
           <div id="search-block " class="">
-            <el-tabs v-model="searchType" type="card" @tab-click="handleClick" v-if="tabArr">
+            <el-tabs v-model="searchType" type="card" @tab-click="handleTypeClick" v-if="tabArr">
               <el-tab-pane v-for="item in tabArr" :label="item.label" :name="item.name" :key="item.label"></el-tab-pane>
             </el-tabs>
             <div class="search-input">
@@ -27,14 +27,14 @@
       </el-col>
     </el-row>
     <!--TabNav-->
-    <el-tabs :value="currTab" @tab-click="handleClick" class="square-tab" v-if="menuArr">
+    <el-tabs :value="currTab" @tab-click="handleTabClick" class="square-tab" v-if="menuArr">
       <el-tab-pane v-if="!menuArr.menuArr1" v-for="item in menuArr" :name="item.name" :key="item.name" class="tab-menu1">
         <span slot="label" style="font-size: 18px">{{item.label}}</span>
       </el-tab-pane>
-      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr1" :label="item.label" :name="item.name" :key="item.name" class="tab-menu1"></el-tab-pane>
+      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr1" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
 <!--      <el-tab-pane v-if="menuArr.menuArr1" name="name"  class="tab-menu1" label="|">|</el-tab-pane>-->
-      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr2" :label="item.label" :name="item.name" :key="item.name" class="tab-menu2"></el-tab-pane>
-      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr3" :label="item.label" :name="item.name" :key="item.name" class="tab-menu3"></el-tab-pane>
+      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr2" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
+      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr3" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
     </el-tabs>
     <div>
     </div>
@@ -44,6 +44,8 @@
 
 <script>
   import { mapGetters , mapActions} from 'vuex'
+  import  commonData  from '../../constants/tabMenu'
+  import Http from '@/js/http.js'
   export default {
     name: 'SearchBar',
     // components:{},
@@ -66,14 +68,35 @@
      },
     methods:{
       ...mapActions(["setActiveTab"]),
-      handleClick(tab){
+      handleTabClick(tab){
+        // console.log(tab);
         this.setActiveTab(tab.name);
-        this.currTab=tab.name;
-
+        // console.log(this.getActiveTab);
+        let pathInfo =  commonData.menuData.find((item)=>{
+          return item.name === tab.name})
+        //注意： 直接写pathInfo.targetPage 会 undefined
+        console.log(pathInfo);
+        let path = pathInfo&&pathInfo.targetPage;
+        console.log(path);
+        // console.log({searchType:'项目',keyword: this.searchVal});
+        this.$router.push({path,query:{searchType:'项目',keyword: this.searchVal}});
+        this.$router.push({path,query:{keyword: this.searchVal}});
+      },
+      handleTypeClick(tab){
+        this.searchType = tab.name;
       },
-      // handleSearchData(){
-      //   if(getActiveTab == 'square')
-      // }
+      handleSearchData(){
+        // console.log(commonData.menuData);
+        // console.log(this.getActiveTab);
+        // let url = commonData.menuData.find((item)=>{return item.name = this.getActiveTab});
+        // let params = {"keyword": this.keyword,"activePage":this.activePage}
+        let targetTab = this.getActiveTab;
+        let pathInfo =  commonData.menuData.find((item)=>{
+          return item.name === this.getActiveTab})
+        //注意： 直接写pathInfo.targetPage 会 undefined
+        let path = pathInfo&&pathInfo.targetPage;
+        this.$router.push({path,query:{keyword: this.searchVal}});
+      }
     }
   }
 

src/constants/tabMenu.js

@@ -0,0 +1,13 @@
+const menuData =  [
+  {label:"首页",name:"squareHome",searchUrl:"/api/square/search/list",targetPage:"/square"},
+  {label:"测试项目",name:"testProject",searchUrl:"/api/square/search/list",targetPage:"/square/project"},
+  {label:"测试任务",name:"testTask",searchUrl:"/api/square/search/list",targetPage:"/square/task"},
+  {label:"技术文章",name:"article",searchUrl:"/api/technical/articles",targetPage:"/technology/article"},
+  {label:"技术专著",name:"monograph",searchUrl:"/api/technical/articles",targetPage:"/technology/monograph"},
+
+
+]
+export default {
+  menuData,
+
+}

src/pages/Square/Square2.0.vue

@@ -36,13 +36,13 @@
     data(){
       return {
         tabArr : [
-          {label:"项目",name:"project",searchUrl:"",targetPage:""},
+          {label:"项目",name:"project"},
           {label:"任务",name:"task"}
         ],
         menuArr: [
           {label:"首页",name:"squareHome"},
           {label:"测试项目",name:"testProject"},
-          {label:"测试任务",name:"teskTask"}
+          {label:"测试任务",name:"testTask"}
         ],
         projectAndTaskArr:[],
         hotCrowdTestProjectVOs:[],
@@ -82,24 +82,21 @@
           this.hotCrowdTestProjectVOs = res.data.hotCrowdTestProjectVOs;
           this.hotCrowdTaskVOs = res.data.hotCrowdTaskVOs;
           this.projectAndTaskArr = projectAndTaskArr;
-          // for(var i=0;i<projectAndTaskArr.length;i+=3){
-          //   this.projectAndTaskArr.push(projectAndTaskArr.slice(i,i+3));
-          // }
         })
       },
-      loadTestProject(){
-        let url = '/api/square/project/list';
-        let params = {"keyword": this.keyword,"activePage":this.activePage}
-        Http.get(url,params)
-          .then(res=>{
-            console.log(res);
-          })
-      },
+      // loadTestProject(){
+      //   let url = '/api/square/project/list';
+      //   let params = {"keyword": this.keyword,"activePage":this.activePage}
+      //   Http.get(url,params)
+      //     .then(res=>{
+      //       console.log(res);
+      //     })
+      // },
     },
     mounted() {
       this.loadData();
       this.setActiveTab('squareHome');
-      this.loadTestProject();
+      // this.loadTestProject();
     }
   }
 </script>

src/pages/Square/SquareProject.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <SearchBar :tabArr="tabArr" :menuArr="menuArr"></SearchBar>
+    <div class="container">
+      <el-row>
+        <el-col :span="18" class="project-task">
+          <!--          <el-row :gutter="15" v-for="(item,index) in projectAndTaskArr" :key="index" style="margin-bottom: 10px">-->
+          <!--            <el-col :span="8" v-for="card in item" :key="card.id">-->
+          <!--              <SquareCard :card="card"></SquareCard>-->
+          <!--            </el-col>-->
+          <!--          </el-row>-->
+          <el-row :gutter="15"  style="margin-bottom: 10px">
+            <el-col :span="8" v-for="(item,index) in projectAndTaskArr" :key="index" style="margin-bottom: 15px">
+              <SquareCard :card="item"></SquareCard>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="6"  class="popular-modules" style="padding-left: 15px">
+          <PopularProject :hotCrowdTestProjectVOs="hotCrowdTestProjectVOs" style="margin-bottom: 15px"/>
+          <PopularTask :hotCrowdTaskVOs="hotCrowdTaskVOs"/>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Http from '@/js/http.js'
+  import SearchBar from '../../components/commons/SearchBar'
+  import SquareCard from './SquareCard'
+  import PopularProject from './PopularProject'
+  import PopularTask from './PopularTask'
+  import { mapActions ,mapGetters} from 'vuex';
+  export default {
+    name: 'SquareProject',
+    data(){
+      return {
+        tabArr : [
+          {label:"项目",name:"project"},
+          {label:"任务",name:"task"}
+        ],
+        menuArr: [
+          {label:"首页",name:"squareHome"},
+          {label:"测试项目",name:"testProject"},
+          {label:"测试任务",name:"testTask"}
+        ],
+        projectAndTaskArr:[],
+        hotCrowdTestProjectVOs:[],
+        hotCrowdTaskVOs:[],
+        activePage:1,
+        keyword:''
+      }
+    },
+    components: {
+      SearchBar,
+      SquareCard,
+      PopularProject,
+      PopularTask
+    },
+    computed:{
+      ...mapGetters(['getActiveTab']),
+      // currTab: {
+      //   get() {
+      //     // if(this.getActiveTab === 'squareHome'){
+      //     //   this.loadData();
+      //     // }
+      //     // if(this.getActiveTab === 'testProject'){
+      //     //   this.loadTestProject();
+      //     // }
+      //     return this.getActiveTab;
+      //   },
+      //   set(){}
+      // }
+    },
+    methods:{
+      ...mapActions(['setActiveTab']),
+      loadData(){
+        let url = '/api/square/project/list';
+        let params = {
+          "keyword": this.$route.query.id,
+          "activePage": this.activePage,
+          "columnFilters":
+            [
+              {
+                "field": "type",
+                "type": "项目" // 改成任务时任务查询
+              }
+            ]
+        };
+        Http.post(url,params)
+          .then(res=>{
+            console.log(res);
+          })
+        },
+    },
+    mounted() {
+      console.log('project page')
+      this.loadData();
+      this.setActiveTab('squareProject');
+    }
+  }
+</script>
+
+<style lang="less">
+  .project-task {
+    padding: 15px 0;
+    .el-card {
+      border: none;
+    }
+  }
+
+  .popular-modules {
+    padding: 15px 0 15px 15px;
+  }
+
+</style>

src/pages/Square/SquareTask.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <SearchBar :tabArr="tabArr" :menuArr="menuArr"></SearchBar>
+    <div class="container">
+      <el-row>
+        <el-col :span="18" class="project-task">
+          <!--          <el-row :gutter="15" v-for="(item,index) in projectAndTaskArr" :key="index" style="margin-bottom: 10px">-->
+          <!--            <el-col :span="8" v-for="card in item" :key="card.id">-->
+          <!--              <SquareCard :card="card"></SquareCard>-->
+          <!--            </el-col>-->
+          <!--          </el-row>-->
+          <el-row :gutter="15"  style="margin-bottom: 10px">
+            <el-col :span="8" v-for="(item,index) in projectAndTaskArr" :key="index" style="margin-bottom: 15px">
+              <SquareCard :card="item"></SquareCard>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="6"  class="popular-modules" style="padding-left: 15px">
+          <PopularProject :hotCrowdTestProjectVOs="hotCrowdTestProjectVOs" style="margin-bottom: 15px"/>
+          <PopularTask :hotCrowdTaskVOs="hotCrowdTaskVOs"/>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Http from '@/js/http.js'
+  import SearchBar from '../../components/commons/SearchBar'
+  import SquareCard from './SquareCard'
+  import PopularProject from './PopularProject'
+  import PopularTask from './PopularTask'
+  import { mapActions ,mapGetters} from 'vuex';
+  export default {
+    name: 'SquareTask',
+    data(){
+      return {
+        tabArr : [
+          {label:"项目",name:"project"},
+          {label:"任务",name:"task"}
+        ],
+        menuArr: [
+          {label:"首页",name:"squareHome"},
+          {label:"测试项目",name:"testProject"},
+          {label:"测试任务",name:"testTask"}
+        ],
+        projectAndTaskArr:[],
+        hotCrowdTestProjectVOs:[],
+        hotCrowdTaskVOs:[],
+        activePage:1,
+        keyword:''
+      }
+    },
+    components: {
+      SearchBar,
+      SquareCard,
+      PopularProject,
+      PopularTask
+    },
+    computed:{
+      ...mapGetters(['getActiveTab']),
+      currTab: {
+        get() {
+          if(this.getActiveTab === 'squareHome'){
+            this.loadData();
+          }
+          if(this.getActiveTab === 'testProject'){
+            this.loadTestProject();
+          }
+          return this.getActiveTab;
+        },
+        set(){}
+      }
+    },
+    methods:{
+      ...mapActions(['setActiveTab']),
+      loadData(){
+        Http.get('/api/square/list').then((res)=>{
+          let crowdTestProjectVOs = res.data.crowdTestProjectVOs;
+          let crowdTestTaskVOS = res.data.crowdTestTaskVOS;
+          let projectAndTaskArr = crowdTestProjectVOs.concat(crowdTestTaskVOS);
+          this.hotCrowdTestProjectVOs = res.data.hotCrowdTestProjectVOs;
+          this.hotCrowdTaskVOs = res.data.hotCrowdTaskVOs;
+          this.projectAndTaskArr = projectAndTaskArr;
+          // for(var i=0;i<projectAndTaskArr.length;i+=3){
+          //   this.projectAndTaskArr.push(projectAndTaskArr.slice(i,i+3));
+          // }
+        })
+      },
+      loadTestProject(){
+        let url = '/api/square/project/list';
+        let params = {"keyword": this.keyword,"activePage":this.activePage}
+        Http.get(url,params)
+          .then(res=>{
+            console.log(res);
+          })
+      },
+    },
+    mounted() {
+      this.loadData();
+      this.setActiveTab('squareTask');
+      this.loadTestProject();
+    }
+  }
+</script>
+
+<style lang="less">
+  .project-task {
+    padding: 15px 0;
+    .el-card {
+      border: none;
+    }
+  }
+
+  .popular-modules {
+    padding: 15px 0 15px 15px;
+  }
+
+</style>

src/pages/Technology/Technology2.0.vue

@@ -42,8 +42,8 @@
     data(){
       return {
         menuArr: [
-          {label:"技术文章",name:"article"},
-          {label:"技术专著",name:"monograph"},
+          {label:"技术文章",name:"article",searchUrl:"/api/technical/articles",targetPage:"/technology/article"},
+          {label:"技术专著",name:"monograph",searchUrl:"/api/technical/articles",targetPage:"/technology/monograph"},
         ],
         articleArr:[],
         keyword:"",

src/pages/Technology/TechnologyArticle2.0.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="technology-container">
+    <SearchBar :menuArr="menuArr"></SearchBar>
+    <div class="container" style="margin: 15px auto">
+      <el-row>
+        <el-col :span="18" class="project-task">
+          <TechnologyCard></TechnologyCard>
+          <el-pagination
+            :page-size="10"
+            layout="prev, pager, next"
+            :total="techArticleList.totalElements"
+            @current-change="handlePageChange"
+            class="pull-right"
+          >
+          </el-pagination>
+        </el-col>
+        <el-col :span="6"  class="popular-modules">
+          <HotActicle :articleArr="articleArr"/>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Http from '@/js/http.js'
+  import SearchBar from '../../components/commons/SearchBar'
+  import TechnologyCard from './TechnologyCard'
+  import HotActicle from './HotActicle'
+  import PopularProject from '../Square/PopularProject'
+  import qs from 'querystring'
+  import { mapActions } from 'vuex';
+
+  export default {
+    name: 'TechnologyArticle2.0',
+    components: {
+      SearchBar,
+      TechnologyCard,
+      PopularProject,
+      HotActicle
+    },
+    data(){
+      return {
+        activeTab:'article',
+        menuArr: [
+          {label:"技术文章",name:"article"},
+          {label:"技术专著",name:"monograph"},
+        ],
+        articleArr:[],
+        keyword:"",
+        activePage:1,
+        techArticleList:{}
+      }
+    },
+    methods:{
+      ...mapActions(['setTechArticleList','setCurrentTab']),
+      loadHotArticles(){
+        Http.get('/api/technical/ranking').then((res)=>{
+          this.articleArr = res;
+        })
+      },
+      loadTechnologyArticles(){
+        // let url=`/api/technical/articles?searchCondition={"keyword":"${this.keyword}","activePage":${this.activePage}}`;
+        // Http.get(encodeURI(url))
+        let url = '/api/technical/articles';
+        let keyword = this.$route.query.keyword ? this.$route.query.keyword :this.keyword
+        let params = {"keyword": keyword,"activePage":this.activePage}
+        Http.post(url,params)
+          .then(res=>{
+            this.techArticleList = res.data.technicalArticlespage;
+            this.setTechArticleList(this.techArticleList);
+          })
+      },
+      handlePageChange(index){
+        this.activePage = index;
+        this.loadTechnologyArticles();
+      },
+      fetchData(newVal, oldVa) {
+        console.log(oldVa)//oldVa 上一次url
+        console.log(newVal);//newVal 这一次的url
+      }
+
+    },
+    mounted() {
+      this.setCurrentTab('article');
+      console.log(this.$route.query.keyword);
+      this.loadHotArticles();
+      this.loadTechnologyArticles();
+      // this.setCurrentTab('technology');
+
+    },
+    watch: {
+      $route: "fetchData"
+    }
+    }
+</script>
+
+<style scoped lang="less">
+  .technology-container {
+    /deep/ .search-input,/deep/ .releaseBtn{
+      margin: 20px 0 0 0 !important;
+    }
+
+    .popular-modules {
+      padding-left: 15px;
+    }
+  }
+
+</style>

src/router/index.js

@@ -253,32 +253,53 @@ export default new Router({
       },
     },
     {
-      path: '/technology',
+      path: '/square/task',
+      name: 'SquareTask',
+      component: resolve => require(['@/pages/Square/SquareTask.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
+    {
+      path: '/square/project',
+      name: 'SquareProject',
+      component: resolve => require(['@/pages/Square/SquareProject.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
+    {
+      path: '/technology/',
       name: 'Technology',
-      // redirect: '/technology/article',
       component: resolve => require(['@/pages/Technology/Technology2.0.vue'], resolve),
       meta: {
         title: '',
         requireAuth: false,
       },
     },
-    // {
-    //   path: '/technology/article',
-    //   name: 'Technology',
-    //   component: resolve => require(['@/pages/Technology/Technology2.0.vue'], resolve),
-    //   meta: {
-    //     title: '',
-    //     requireAuth: false,
-    //   },
-    // },
-    // {
-    //   path: '/technology/monograph',
-    //   name: 'Technology',
-    //   component: resolve => require(['@/pages/Technology/TechnologyMG2.0.vue'], resolve),
-    //   meta: {
-    //     title: '',
-    //     requireAuth: false,
-    //   },
-    // },
+    {
+      path: '/technology/article',
+      name: 'TechnologyArticle2.0',
+      component: resolve => require(['@/pages/Technology/TechnologyArticle2.0.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
+    {
+      path: '/technology/monograph',
+      name: 'TechnologyMG2.0',
+      component: resolve => require(['@/pages/Technology/TechnologyMG2.0.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
   ]
 })
+const originalPush = Router.prototype.push
+Router.prototype.push = function push (location) {
+  return originalPush.call(this, location).catch(err => err)
+}