1

src/views/market/list/achieve.vue

@@ -79,7 +79,7 @@ export default {
           name: '吉林大学',
         },
         {
-          name: '长春理工大学',
+          name: '长春工业大学',
         },
       ],
     };

src/views/market/list/expert.vue

@@ -2,58 +2,52 @@
   <div id="expert">
     <el-row>
       <el-col :span="24" class="main">
-        <el-col :span="24" class="listTop">
-          <el-col :span="12" class="columnname">
+        <el-col :span="24" class="top">
+          <el-col :span="3" class="left">
             <span>|</span> <span>{{ column_name }}</span>
           </el-col>
-          <el-col :span="12" class="search">
-            <el-input placeholder="请输入名称" v-model="infoName" class="input-with-select">
-              <el-button slot="append" icon="el-icon-search" @click="searchData()"></el-button>
-            </el-input>
+          <el-col :span="21" class="right">
+            <el-col :span="12" class="tabs">
+              <!-- 主要成果单位 -->
+              <span v-for="(item, index) in firDroplist" :key="index" @click="change(item.name)">{{ item.name }}</span>
+              <!-- 其他 -->
+              <el-dropdown trigger="click" @command="change">
+                <span class="el-dropdown-link"> 其他<i class="el-icon-arrow-down el-icon--right"></i> </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item v-for="(item, index) in dropList" :key="index" :command="item.name">{{ item.name }}</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-col>
+            <el-col :span="12" class="search">
+              <el-input placeholder="请输入名称" v-model="infoName" class="input-with-select" clearable>
+                <el-button slot="append" icon="el-icon-search" @click="searchData()"></el-button>
+              </el-input>
+            </el-col>
           </el-col>
         </el-col>
-        <el-col :span="12" class="list" v-for="(item, index) in list" :key="index">
-          <el-col :span="5" class="image">
-            <el-image v-if="item.expertimage != null || undefined" :src="item.expertimage"></el-image>
-            <el-image :src="expertimage" v-else></el-image>
+        <el-col :span="24" class="down">
+          <el-col :span="12" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="5" class="image">
+              <el-image v-if="item.expertimage != null || undefined" :src="item.expertimage"></el-image>
+              <el-image :src="expertimage" v-else></el-image>
+            </el-col>
+            <el-col :span="19" class="other">
+              <p class="name textOver" @click="clickDetail(item.id)">{{ item.name }}</p>
+              <p class="textOver">工作单位：{{ item.company || '暂无' }}</p>
+              <p class="textOver">擅长领域：{{ item.expertise || '暂无' }}</p>
+            </el-col>
           </el-col>
-          <el-col :span="19" class="other">
-            <p class="name textOver" @click="clickDetail(item.id)">{{ item.name }}</p>
-            <p class="textOver">
-              工作单位：{{ item.company || '暂无' }}
-              <!-- <el-tooltip class="item" effect="dark" placement="top">
-                <div slot="content">{{ item.company || '暂无' }}</div>
-                <span class="textOver">工作单位：{{ item.company || '暂无' }}</span>
-              </el-tooltip>
-              <span class="textOver">最高学历：{{ item.education || '暂无' }}</span> -->
-              <!-- <span class="textOver">工作单位：{{ item.company || '暂无' }}</span> -->
-            </p>
-            <p class="textOver">
-              擅长领域：{{ item.expertise || '暂无' }}
-              <!-- <span class="textOver">擅长领域：{{ item.expertise || '暂无' }}</span> -->
-            </p>
-          </el-col>
-          <!-- <el-col :span="21" class="name" @click.native="clickDetail(item.id)">
-            {{ item.name }}
-          </el-col>
-          <el-col :span="3" class="date">
-            {{ item.meta | getDate }}
-          </el-col>
-          <el-col :span="12" class="brief textOver"> 工作单位:{{ item.company || '暂无' }} </el-col>
-          <el-col :span="12" class="brief textOver"> 学历:{{ item.education || '暂无' }} </el-col>
-          <el-col :span="12" class="brief textOver"> 职务职称:{{ item.zwzc || '暂无' }} </el-col>
-          <el-col :span="12" class="brief textOver"> 擅长领域:{{ item.expertise || '暂无' }} </el-col> -->
         </el-col>
-      </el-col>
-      <el-col :span="24" class="page">
-        <el-pagination
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          layout="total, prev, pager, next, jumper"
-          :total="total"
-          :page-size="pageSize"
-        >
-        </el-pagination>
+        <el-col :span="24" class="page">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+            :page-size="pageSize"
+          >
+          </el-pagination>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -67,16 +61,29 @@ export default {
     expertList: { type: Array },
     total: { type: Number },
     column_name: null,
+    dropList: { type: Array },
   },
   components: {},
   data: function() {
     return {
       currentPage: 1, //默认数据1
-      pageSize: 10, //每页显示数据数量
+      pageSize: 8, //每页显示数据数量
       origin: [], //分割数据
       list: [], //显示数据列表
       infoName: '',
       expertimage: require('@/assets/live/222.png'),
+      // 主要专家单位
+      firDroplist: [
+        {
+          name: '中科系',
+        },
+        {
+          name: '吉林大学',
+        },
+        {
+          name: '长春工业大学',
+        },
+      ],
     };
   },
   created() {},
@@ -91,11 +98,17 @@ export default {
     clickDetail(id) {
       this.$emit('clickDetail', { column_name: '专家智库', id: id });
     },
-    // 查询
+    // 选择
+    change(data) {
+      this.$emit('changeExpertCom', data);
+    },
     searchData() {
       this.$emit('searchData', { name: this.infoName, columnName: '专家智库' });
     },
   },
+  computed: {
+    ...mapState(['user']),
+  },
   watch: {
     expertList: {
       immediate: true,
@@ -110,92 +123,17 @@ export default {
       },
     },
   },
-  // 过滤时间
-  filters: {
-    getDate(meta) {
-      let createdAt = _.get(meta, `createdAt`);
-      let date = new Date(createdAt)
-        .toLocaleDateString()
-        .replace('/', '-')
-        .replace('/', '-');
-      return date;
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
 };
 </script>
 
 <style lang="less" scoped>
 .main {
-  padding: 0 10px;
-  min-height: 620px;
-  .list {
-    padding: 10px 0;
-    border-bottom: 1px dashed #ccc;
-    .image {
-      .el-image {
-        border-radius: 90px;
-        width: 90px;
-        height: 90px;
-      }
-    }
-    .other {
-      padding: 0 10px;
-      p {
-        font-size: 16px;
-        color: #666;
-        padding: 0 0 5px 0;
-        span {
-          display: inline-block;
-          width: 50%;
-        }
-      }
-      p:nth-child(1) {
-        font-size: 18px;
-        font-weight: bold;
-        color: #000;
-      }
-    }
-    // .name {
-    //   font-size: 18px;
-    // }
-    // .date {
-    //   font-size: 16px;
-    //   text-align: center;
-    // }
-    // .brief {
-    //   font-size: 15px;
-    //   padding: 5px 0 0 0;
-    // }
-  }
-  .list:hover {
-    cursor: pointer;
-    .other {
-      .name {
-        -webkit-transform: translateY(-3px);
-        -ms-transform: translateY(-3px);
-        transform: translateY(-3px);
-        -webkit-box-shadow: 0 0 6px #999;
-        box-shadow: 0 0 6px #999;
-        -webkit-transition: all 0.5s ease-out;
-        transition: all 0.5s ease-out;
-        color: #0085d2;
-      }
-    }
-  }
-  .listTop {
+  .top {
     height: 49px;
-    line-height: 49px;
     border-bottom: 1px solid #ccc;
-    .columnname {
+    padding: 5px 0 0 0;
+    .left {
+      text-align: center;
       span:first-child {
         color: #22529a;
         font-weight: bold;
@@ -207,11 +145,78 @@ export default {
         font-weight: bold;
       }
     }
+    .right {
+      .tabs {
+        span {
+          font-size: 16px;
+          padding: 8px 10px;
+          display: inline-block;
+          font-weight: bold;
+        }
+        span:hover {
+          cursor: pointer;
+          color: #409eff;
+        }
+      }
+      .search {
+        /deep/.el-input__inner {
+          height: 35px;
+          line-height: 35px;
+        }
+      }
+    }
+  }
+  .down {
+    height: 500px;
+    overflow: hidden;
+    .list {
+      padding: 12px 0;
+      border-bottom: 1px dashed #ccc;
+      .image {
+        .el-image {
+          border-radius: 90px;
+          width: 90px;
+          height: 90px;
+        }
+      }
+      .other {
+        padding: 0 10px;
+        p {
+          font-size: 16px;
+          color: #666;
+          padding: 0 0 10px 0;
+          span {
+            display: inline-block;
+            width: 50%;
+          }
+        }
+        p:nth-child(1) {
+          font-size: 18px;
+          font-weight: bold;
+          color: #000;
+        }
+      }
+    }
+    .list:hover {
+      cursor: pointer;
+      .other {
+        .name {
+          -webkit-transform: translateY(-3px);
+          -ms-transform: translateY(-3px);
+          transform: translateY(-3px);
+          -webkit-box-shadow: 0 0 6px #999;
+          box-shadow: 0 0 6px #999;
+          -webkit-transition: all 0.5s ease-out;
+          transition: all 0.5s ease-out;
+          color: #0085d2;
+        }
+      }
+    }
+  }
+  .page {
+    text-align: center;
+    height: 30px;
+    overflow: hidden;
   }
-}
-.page {
-  text-align: center;
-  height: 40px;
-  padding: 5px 0;
 }
 </style>

src/views/market/marketlists.vue

@@ -43,7 +43,15 @@
                   ></business>
                 </span>
                 <span v-else-if="column_name == '专家智库'">
-                  <expert :expertList="expertList" :column_name="column_name" :total="expertTotal" @clickDetail="clickDetail" @searchData="searchData"></expert>
+                  <expert
+                    :expertList="expertList"
+                    :column_name="column_name"
+                    :total="expertTotal"
+                    @clickDetail="clickDetail"
+                    @searchData="searchData"
+                    @changeExpertCom="changeExpertCom"
+                    :dropList="expertdropList"
+                  ></expert>
                 </span>
               </el-col>
             </span>
@@ -154,6 +162,8 @@ export default {
       expertList: [],
       expertTotal: 0,
       expeDetail: {},
+      // 单位列表
+      expertdropList: [],
       // 显示按钮
       displayBtn: true,
     };
@@ -288,8 +298,9 @@ export default {
     searchData({ name, columnName }) {
       this.searchInfo({ columnName, name });
     },
-    // 查询成果单位
+    // 查询成果单位,专家工作单位
     async searchCom() {
+      // 成果单位
       let res = await this.productList({ type: '1', status: '1' });
       if (this.$checkRes(res)) {
         let newRes = _.uniqBy(
@@ -301,12 +312,28 @@ export default {
             i.name != '中科院长春光学精密机械与物理研究所' &&
             i.name != '中国科学院长春应用化学研究所' &&
             i.name != '吉林大学' &&
-            i.name != '长春理工大学'
+            i.name != '长春工业大学'
         );
         if (newRes) this.$set(this, `dropList`, newRes);
       }
+      // 专家工作单位
+      res = await this.expertsuserList();
+      if (this.$checkRes(res)) {
+        let newRes = _.uniqBy(
+          res.data.map(i => ({ name: i.company })),
+          'name'
+        ).filter(
+          i =>
+            i.name != '中国科学院东北地理与农业生态研究所' &&
+            i.name != '中国科学院长春应用化学研究所' &&
+            i.name != '中科院长春光学精密机械与物理研究所' &&
+            i.name != '吉林大学' &&
+            i.name != '长春工业大学'
+        );
+        if (newRes) this.$set(this, `expertdropList`, newRes);
+      }
     },
-    // 选择单位
+    // 成果选择单位
     async changeCom(data) {
       if (data == '中科系') {
         let res = await this.productList({ type: '1', status: '1', company: '中科院长春分院' });
@@ -327,6 +354,27 @@ export default {
         }
       }
     },
+    // 专家选择单位
+    async changeExpertCom(data) {
+      if (data == '中科系') {
+        let res = await this.expertsuserList({ company: '中国科学院东北地理与农业生态研究所' });
+        let arr = await this.expertsuserList({ company: '中国科学院长春应用化学研究所' });
+        let val = await this.expertsuserList({ company: '中科院长春光学精密机械与物理研究所' });
+        if (res || arr || val) {
+          var newData = res.data.concat(arr.data).concat(val.data);
+          if (newData) {
+            this.$set(this, `expertList`, newData);
+            this.$set(this, `expertTotal`, newData.length);
+          }
+        }
+      } else {
+        let res = await this.expertsuserList({ company: data });
+        if (this.$checkRes(res)) {
+          this.$set(this, `expertList`, res.data);
+          this.$set(this, `expertTotal`, res.total);
+        }
+      }
+    },
   },
   computed: {
     ...mapState(['user']),