11

src/views/halltwo/detail.vue

@@ -69,8 +69,9 @@
                 </el-col>
                 <el-col :span="24" class="tabs">
                   <el-tabs v-model="activeName">
-                    <el-tab-pane label="参展项目(0)" name="first">
-                      <el-table :data="tableData" stripe style="width: 100%">
+                    <el-tab-pane name="first">
+                      <span slot="label">参展项目({{ total1 }})</span>
+                      <el-table :data="list1" stripe style="width: 100%">
                         <el-table-column prop="field" label="所属领域" width="180"> </el-table-column>
                         <el-table-column prop="name" label="项目名称" width="180"> </el-table-column>
                         <el-table-column prop="type" label="技术类型">
@@ -82,17 +83,18 @@
                       </el-table>
                       <el-col class="page1" :span="24">
                         <el-pagination
-                          @current-change="handleCurrentChange2"
-                          :current-page="currentPage2"
+                          @current-change="handleCurrentChange1"
+                          :current-page="currentPage1"
                           layout="total, prev, pager, next, jumper"
-                          :total="total2"
-                          :page-size="pageSize2"
+                          :total="total1"
+                          :page-size="pageSize1"
                         >
                         </el-pagination>
                       </el-col>
                     </el-tab-pane>
-                    <el-tab-pane label="参展需求(0)" name="second">
-                      <el-table :data="tableData1" stripe style="width: 100%">
+                    <el-tab-pane name="second">
+                      <span slot="label">参展需求({{ total2 }})</span>
+                      <el-table :data="list2" stripe style="width: 100%">
                         <el-table-column prop="type" label="需求类别">
                           <template slot-scope="scope">
                             <span>{{ scope.row.type == '0' ? '科技需求' : scope.row.type == '1' ? '技术成果' : '商务信息' }}</span>
@@ -108,11 +110,11 @@
                       </el-table>
                       <el-col class="page1" :span="24">
                         <el-pagination
-                          @current-change="handleCurrentChange1"
-                          :current-page="currentPage1"
+                          @current-change="handleCurrentChange2"
+                          :current-page="currentPage2"
                           layout="total, prev, pager, next, jumper"
-                          :total="total1"
-                          :page-size="pageSize1"
+                          :total="total2"
+                          :page-size="pageSize2"
                         >
                         </el-pagination>
                       </el-col>
@@ -246,18 +248,9 @@ export default {
       dockInfo: {},
       activeName: 'first',
       //参展项目列表
-      tableData: [
-        { classifi: '11111111111111111111111', name: '1111111111111111111111111111111', type: '11', mode: '11' },
-        { classifi: '11', name: '1', type: '11', mode: '11' },
-        { classifi: '11111111111111111111111', name: '1', type: '11', mode: '11' },
-        { classifi: '11', name: '1', type: '11', mode: '11' },
-        { classifi: '11111111111111111111111', name: '1', type: '11', mode: '11' },
-      ],
+      tableData: [],
       //参展需求
-      tableData1: [
-        { type: '11111111111111111111111', name: '1', money: '11', site: '11' },
-        { type: '11111', name: '1', money: '11', site: '11' },
-      ],
+      tableData1: [],
       //专家列表
       expertList: [],
       //协办单位列表
@@ -279,9 +272,15 @@ export default {
       total: 0,
       currentPage: 1,
       input3: '',
+      origin: [],
+      //参展项目分页
+      list1: [],
       pageSize1: 10,
       total1: 0,
       currentPage1: 1,
+      //参展需求分页
+      origin2: [],
+      list2: [],
       pageSize2: 10,
       total2: 0,
       currentPage2: 1,
@@ -304,9 +303,12 @@ export default {
           let czxmNew = czxm.filter(item => item.dockStatus == '1');
           // 参展项目
           this.$set(this, `tableData`, czxmNew);
+          this.$set(this, `total1`, czxmNew.length);
+
           // 科技需求
           let techol = czxmNew.filter(i => i.type == '0');
           this.$set(this, `tableData1`, techol);
+          this.$set(this, `total2`, techol.length);
         }
       }
       //查询专家列表
@@ -323,12 +325,17 @@ export default {
     handleCurrentChange(skip) {
       this.searchInfo({ skip });
     },
-    handleCurrentChange1(skip) {
-      // this.searchInfo({ skip });
-      console.log(skip);
+    searchPage1(page = 1) {
+      this.$set(this, `list1`, this.origin[page - 1]);
+    },
+    handleCurrentChange1(currentPage) {
+      this.searchPage1(currentPage);
+    },
+    searchPage2(page = 1) {
+      this.$set(this, `list2`, this.origin2[page - 1]);
     },
-    handleCurrentChange2(skip) {
-      console.log(skip);
+    handleCurrentChange2(currentPage) {
+      this.searchPage2(currentPage);
     },
   },
   computed: {
@@ -337,6 +344,26 @@ export default {
       return this.$route.query.id;
     },
   },
+  watch: {
+    //参展项目
+    tableData: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize1));
+        this.searchPage1();
+      },
+    },
+    //参展需求
+    tableData1: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin2`, _.chunk(val, this.pageSize2));
+        this.searchPage2();
+      },
+    },
+  },
 };
 </script>