Merge branch 'master' of http://git.cc-lotus.info/service-platform/web-test

src/views/halltwo/xmcg.vue

@@ -44,7 +44,40 @@
         <el-col :span="24" class="three">
           <div class="w_1200">
             <el-col :span="24" class="threeinfo">
-              列表
+              <p>项目成果</p>
+              <el-col :span="24" class="all">
+                <el-col :span="3" class="textAll"><span>全部</span></el-col>
+                <el-col :span="3" class="field" v-for="(item, index) in fieldList" :key="index" @click.native="change(item, index)">{{ item }}</el-col>
+              </el-col>
+              <el-col :span="24" class="list">
+                <el-table :data="list1" stripe style="width: 100%" fit :show-header="showHead">
+                  <el-table-column prop="field" width="300">
+                    <template slot-scope="scope">
+                      <span style="margin-left: 20px">{{ scope.row.field }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="name" width="700">
+                    <template slot-scope="scope">
+                      <span class="name">{{ scope.row.name }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column>
+                    <template slot-scope="scope">
+                      <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">对接</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <el-col class="page1" :span="24">
+                  <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-col>
           </div>
         </el-col>
@@ -100,6 +133,17 @@ export default {
       dockInfo: {},
       // 指导单位
       erweima: require('@a/二维码.jpg'),
+      //领域列表
+      fieldList: [],
+      //全部列表
+      list: [],
+      //列表头部
+      showHead: false,
+      pageSize: 10,
+      total: 0,
+      currentPage: 1,
+      origin: [],
+      list1: [],
     };
   },
   async created() {
@@ -113,9 +157,37 @@ export default {
         let res = await this.dockFetch(this.id);
         if (this.$checkRes(res)) {
           this.$set(this, `dockInfo`, res.data);
+          let czxm = res.data.apply.map(item => item.goodsList);
+          czxm = _.flattenDeep(czxm);
+          let czxmNew = czxm.filter(item => item.dockStatus == '1');
+          // 技术成果
+          let achieve = czxmNew.filter(i => i.type == '1');
+          this.$set(this, `list`, achieve);
+          this.$set(this, `total`, achieve.length);
+          let lists = this.list;
+          let fieldLists = this.fieldList;
+
+          for (let item of lists) {
+            if (fieldLists.indexOf(item.field) == -1) fieldLists.push(item.field);
+          }
         }
       }
     },
+    searchPage(page = 1) {
+      this.$set(this, `list1`, this.origin[page - 1]);
+    },
+    handleCurrentChange(currentPage) {
+      this.searchPage(currentPage);
+    },
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    change(item, index) {
+      let val = this.list;
+      let techol = val.filter(i => i.field == item);
+      this.$set(this, `list1`, techol);
+      this.$set(this, `total`, techol.length);
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -123,7 +195,16 @@ export default {
       return this.$route.query.id;
     },
   },
-  watch: {},
+  watch: {
+    list: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.searchPage();
+      },
+    },
+  },
 };
 </script>
 
@@ -249,16 +330,56 @@ export default {
     }
   }
   .three {
-    height: 700px;
+    height: 860px;
     overflow: hidden;
     position: relative;
     top: -50px;
     z-index: 999;
     .threeinfo {
-      height: 700px;
+      height: 860px;
       overflow: hidden;
       background-color: #fff;
       border: 1px solid red;
+      padding: 30px;
+      p:nth-child(1) {
+        font-family: '微软雅黑';
+        font-weight: 400;
+        font-size: 26px;
+      }
+      .all {
+        line-height: 46px;
+        background: #f8f8f8;
+        margin: 20px 0 40px 0;
+        .field,
+        .textAll {
+          text-align: center;
+          font-size: 16px;
+          padding: 0 15px;
+          cursor: pointer;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .textAll {
+          background-color: #2152cb;
+          span {
+            color: #fff;
+          }
+        }
+        .field:hover {
+          color: #777;
+        }
+      }
+      .list {
+        .page1 {
+          margin: 40px 0px;
+          text-align: center;
+        }
+        .name:hover {
+          color: #777;
+          cursor: pointer;
+        }
+      }
     }
   }
   .four {
@@ -283,4 +404,9 @@ export default {
     }
   }
 }
+/deep/.el-table .cell {
+  font-weight: 400;
+  font-size: 14px;
+  color: black;
+}
 </style>