1

src/views/market/list/achieve.vue

@@ -2,35 +2,50 @@
   <div id="achieve">
     <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="24" class="list" v-for="(item, index) in list" :key="index">
-          <el-col :span="21" class="name" @click.native="clickDetail(item.id)">
-            {{ item.name }}
+        <el-col :span="24" class="down">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="21" class="name" @click.native="clickDetail(item.id)">
+              {{ item.name }}
+            </el-col>
+            <el-col :span="3" class="date">
+              {{ getDate(item.meta.updatedAt) }}
+            </el-col>
+            <el-col :span="24" class="brief"> 成果简介：{{ item.achievebrief || '暂无' }} </el-col>
           </el-col>
-          <el-col :span="3" class="date">
-            {{ item.meta | getDate }}
-          </el-col>
-          <el-col :span="24" class="brief"> 成果简介：{{ item.achievebrief }} </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>
@@ -38,21 +53,35 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+var moment = require('moment');
 export default {
   name: 'achieve',
   props: {
+    column_name: { type: String },
     achieveList: { type: Array },
     total: { type: Number },
-    column_name: null,
+    dropList: { type: Array },
   },
   components: {},
   data: function() {
     return {
+      infoName: '',
       currentPage: 1, //默认数据1
-      pageSize: 6, //每页显示数据数量
+      pageSize: 5, //每页显示数据数量
       origin: [], //分割数据
       list: [], //显示数据列表
-      infoName: '',
+      // 主要成果单位
+      firDroplist: [
+        {
+          name: '中科系',
+        },
+        {
+          name: '吉林大学',
+        },
+        {
+          name: '长春理工大学',
+        },
+      ],
     };
   },
   created() {},
@@ -67,11 +96,23 @@ export default {
     clickDetail(id) {
       this.$emit('clickDetail', { column_name: '技术成果', id: id });
     },
+    // 获取时间
+    getDate(date) {
+      let newDate = moment(date).format('YYYY-MM-DD');
+      if (newDate) return newDate;
+    },
+    // 选择
+    change(data) {
+      this.$emit('changeCom', data);
+    },
     // 查询
     searchData() {
       this.$emit('searchData', { name: this.infoName, columnName: '技术成果' });
     },
   },
+  computed: {
+    ...mapState(['user']),
+  },
   watch: {
     achieveList: {
       immediate: true,
@@ -86,73 +127,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;
-    .name {
-      font-size: 18px;
-      font-weight: bold;
-    }
-    .date {
-      font-size: 16px;
-      text-align: center;
-    }
-    .brief {
-      font-size: 16px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      -webkit-line-clamp: 2;
-      word-break: break-all;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      margin: 10px 0 0 0;
-      max-height: 42px;
-    }
-  }
-  .list:hover {
-    cursor: pointer;
-    .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;
@@ -164,11 +149,70 @@ 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: 10px 0;
+      .name {
+        font-size: 18px;
+        font-weight: bold;
+      }
+      .date {
+        font-size: 16px;
+        text-align: center;
+      }
+      .brief {
+        font-size: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        margin: 10px 0 0 0;
+        max-height: 42px;
+      }
+    }
+    .list:hover {
+      cursor: pointer;
+      .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

@@ -29,6 +29,8 @@
                     :total="achieveTotal"
                     @clickDetail="clickDetail"
                     @searchData="searchData"
+                    @changeCom="changeCom"
+                    :dropList="dropList"
                   ></achieve>
                 </span>
                 <span v-else-if="column_name == '商务服务'">
@@ -101,6 +103,7 @@ import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: product } = createNamespacedHelpers('marketproduct');
 const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
 const { mapActions: transaction } = createNamespacedHelpers('transaction');
+import _ from 'lodash';
 export default {
   name: 'marketlists',
   props: {},
@@ -141,6 +144,8 @@ export default {
       achieveList: [],
       achieveTotal: 0,
       achiDetail: {},
+      // 其他单位列表
+      dropList: [],
       // 商务服务
       businessList: [],
       businessTotal: 0,
@@ -153,8 +158,9 @@ export default {
       displayBtn: true,
     };
   },
-  created() {
-    this.searchColumn();
+  async created() {
+    await this.searchColumn();
+    await this.searchCom();
   },
   methods: {
     ...product({ productList: 'newquery', productFetch: 'newfetch' }),
@@ -189,21 +195,21 @@ export default {
     },
     // 查看列表
     async searchInfo({ skip = 0, limit = 10, columnName, name, ...info } = {}) {
+      if (name) info.name = name;
       if (columnName == '科技需求') {
-        let res = await this.productList({ skip, type: '0', status: '1', name, ...info });
+        let res = await this.productList({ skip, type: '0', status: '1', ...info });
         if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
         this.$set(this, `technologyTotal`, res.total);
       } else if (columnName == '技术成果') {
-        let res = await this.productList({ skip, type: '1', status: '1', name, ...info });
-        console.log(res.data);
+        let res = await this.productList({ skip, type: '1', status: '1', ...info });
         if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
         this.$set(this, `achieveTotal`, res.total);
       } else if (columnName == '商务服务') {
-        let res = await this.productList({ skip, type: '2', status: '1', name, ...info });
+        let res = await this.productList({ skip, type: '2', status: '1', ...info });
         if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
         this.$set(this, `businessTotal`, res.total);
       } else if (columnName == '专家智库') {
-        let res = await this.expertsuserList({ skip, name, ...info });
+        let res = await this.expertsuserList({ skip, ...info });
         if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
         this.$set(this, `expertTotal`, res.total);
       }
@@ -282,6 +288,38 @@ 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(
+          res.data.map(i => ({ name: i.company })),
+          'name'
+        ).filter(i => i.name != '中科院长春分院' && i.name != '中科院长春光学精密机械与物理研究所' && i.name != '中国科学院长春应用化学研究所');
+        if (newRes) this.$set(this, `dropList`, newRes);
+      }
+    },
+    // 选择单位
+    async changeCom(data) {
+      if (data == '中科系') {
+        let res = await this.productList({ type: '1', status: '1', company: '中科院长春分院' });
+        let arr = await this.productList({ type: '1', status: '1', company: '中科院长春光学精密机械与物理研究所' });
+        let val = await this.productList({ type: '1', status: '1', company: '中国科学院长春应用化学研究所' });
+        if (res || arr || val) {
+          var newData = res.data.concat(arr.data).concat(val.data);
+          if (newData) {
+            this.$set(this, `achieveList`, newData);
+            this.$set(this, `achieveTotal`, newData.length);
+          }
+        }
+      } else {
+        let res = await this.productList({ type: '1', status: '1', company: data });
+        if (this.$checkRes(res)) {
+          this.$set(this, `achieveList`, res.data);
+          this.$set(this, `achieveTotal`, res.total);
+        }
+      }
+    },
   },
   computed: {
     ...mapState(['user']),