[UPDATE] add leaks page.

lightless233 · Dec 1, 2018 · e1282e8 · e1282e8
1 parent 2febe5f
commit e1282e8
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 90 deletions.
diff --git a/geye-fe/src/components/leaks.vue b/geye-fe/src/components/leaks.vue
@@ -1,65 +1,81 @@
 <template>
-  <div>
-    <div class="crumbs">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item>
-          <font-awesome-icon icon="bars" fixed-width></font-awesome-icon>
-          泄露信息管理
-        </el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <font-awesome-icon icon="bars" fixed-width></font-awesome-icon>
+                    泄露信息管理
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
 
-    <div class="container" v-loading="loading">
-      <el-table :data="leaksTable" style="width: 100%">
-        <el-table-column type="expand">
-          <template slot-scope="data">
-            <el-form label-position="left" inline class="demo-table-expand">
-              <el-form-item label="完整代码">
-                <a class="url" :href="data.row.url">{{data.row.url}}</a>
-              </el-form-item>
-              <el-form-item label="原始代码">
-                <a class="url" :href="data.row.full_code_url">{{data.row.full_code_url}}</a>
-              </el-form-item>
-              <el-form-item label="代码段">
-                <pre style="line-height: normal">{{data.row.code}}</pre>
-              </el-form-item>
-            </el-form>
-          </template>
-        </el-table-column>
-        <el-table-column label="#" prop="id" width="100px"></el-table-column>
-        <el-table-column label="泄露信息" prop="name">
-          <template slot-scope="scope">
-            <span>[{{scope.row.author}}/{{scope.row.repoName}}] {{scope.row.path}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" width="100px">
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.status === 1" type="success" size="small">待确认</el-tag>
-            <el-tag v-else-if="scope.row.status === 2" type="danger" size="small">确认泄露</el-tag>
-            <el-tag v-else-if="scope.row.status === 3" type="default" size="small">误报</el-tag>
-            <el-tag v-else type="default" size="small">未知</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200px">
-          <template slot-scope="scope">
-            <el-dropdown trigger="click" @command="handleCommand">
-              <el-button type="primary" size="small">
-                更多操作 <i class="el-icon-arrow-down el-icon--right"></i>
-              </el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item command="confirm" :disabled="scope.row.status === 2">确认泄露</el-dropdown-item>
-                <el-dropdown-item command="ignore" :disabled="scope.row.status === 3">设为误报</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-            <el-button size="small" type="danger" style="margin: auto 5px"
-                       @click="handleDelete(scope.$index, scope.row)">删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
+        <div class="container" v-loading="loading">
+            <el-table :data="leaksTable" ref="filterTable" style="width: 100%" v-on:filter-change="filterChange">
+                <el-table-column type="expand">
+                    <template slot-scope="data">
+                        <el-form label-position="left" class="demo-table-expand">
+                            <el-form-item label="完整代码">
+                                <a class="url" :href="data.row.url">点我查看</a>
+                            </el-form-item>
+                            <el-form-item label="原始代码">
+                                <a class="url" :href="data.row.full_code_url">点我查看</a>
+                            </el-form-item>
+                            <el-form-item label="代码段">
+                                <pre style="line-height: normal; padding-left: 90px">{{data.row.code}}</pre>
+                            </el-form-item>
+                        </el-form>
+                    </template>
+                </el-table-column>
+                <el-table-column label="#" prop="id" width="100px"></el-table-column>
+                <el-table-column label="泄露信息" prop="name">
+                    <template slot-scope="scope">
+                        <span>[{{scope.row.author}}/{{scope.row.repoName}}] {{scope.row.path}}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="状态" width="100px" prop="status" column-key="status" :filters="statusFilterMenu">
+                    <template slot-scope="scope">
+                        <el-tag v-if="scope.row.status === 1" type="success" size="small">待确认</el-tag>
+                        <el-tag v-else-if="scope.row.status === 2" type="danger" size="small">确认泄露</el-tag>
+                        <el-tag v-else-if="scope.row.status === 3" type="default" size="small">误报</el-tag>
+                        <el-tag v-else type="default" size="small">未知</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="200px">
+                    <template slot-scope="scope">
+                        <el-dropdown trigger="click" @command="handleCommand">
+                            <el-button type="primary" size="small">
+                                更多操作 <i class="el-icon-arrow-down el-icon--right"></i>
+                            </el-button>
+                            <el-dropdown-menu slot="dropdown">
+                                <el-dropdown-item
+                                        :command="{'action': 'confirm', 'row': scope.row, 'idx': scope.$index}"
+                                        :disabled="scope.row.status === 2">确认泄露
+                                </el-dropdown-item>
+                                <el-dropdown-item :command="{'action': 'ignore', 'row': scope.row, 'idx': scope.$index}"
+                                                  :disabled="scope.row.status === 3">设为误报
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
+                        <el-button size="small" type="danger" style="margin: auto 5px"
+                                   @click="handleDelete(scope.$index, scope.row)">删除
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
 
-  </div>
+            <!-- 分页组件 -->
+            <div class="block" style="margin-top: 20px" align="center">
+                <el-pagination
+                        @current-change="handleCurrentChange"
+                        :current-page.sync="currentPage"
+                        :page-size="20"
+                        layout="total, prev, pager, next"
+                        :total="totalCount">
+                </el-pagination>
+            </div>
+        </div>
+
+    </div>
 </template>
 
 <script>
@@ -71,20 +87,36 @@
     name: "leaks",
     data() {
       return {
+
+        // constant
+        ALL_STATUS_LEAK: "1,2,3",
+
         // 表格Array
         leaksTable: [],
         loading: false,
         optButtonText: "操作",
+
+        // status 过滤菜单
+        statusFilterMenu: [
+          { text: '待处理', value: 1 },
+          { text: '确认泄露', value: 2 },
+          { text: '误报', value: 3 },
+        ],
+
+        // 分页相关
+        currentPage: 1,
+        totalCount: 0,
       }
     },
     computed: {},
     mounted() {
       this.loading = true;
-      leakService.getLeaks(this, 1, 0)
+      leakService.getLeaks(this, 1, this.ALL_STATUS_LEAK)
         .then(resp => {
           let data = resp.data;
           if (data.code === 1001) {
             this.leaksTable = data.data;
+            this.totalCount = data.total_count;
           } else {
             this.$message.error(data.message);
           }
@@ -105,6 +137,8 @@
             if (data.code === 1001) {
               this.$message.success(data.message);
               this.leaksTable.splice(idx, 1);
+              // 总量记得减1
+              this.totalCount -= 1;
             } else {
               this.$message.error(data.message);
             }
@@ -116,35 +150,127 @@
       },
 
       handleCommand(command) {
-        if (command === "confirm") {}
-      }
+        /*
+        处理下拉菜单的操作
+         */
+        console.log("command:", command);
+        let action = command.action;
+        let row = command.row;
+        let idx = command.idx;
+        let id = row.id;
+
+        if (action !== "confirm" && action !== "ignore") {
+          this.$message.error("未知操作!");
+          return;
+        }
+
+        leakService.changeStatusLeak(this, action, id)
+          .then(resp => {
+            let data = resp.data;
+            if (data.code === 1001) {
+              let newValue = 0;
+              if (action === "ignore") {
+                newValue = 3;
+              } else if (action === "confirm") {
+                newValue = 2;
+              } else {
+                this.$message.error("Error Action!");
+                return;
+              }
+              row.status = newValue;
+              this.leaksTable.splice(idx, 1, row);
+              this.$message.success(data.message);
+            } else {
+              this.$message.error(data.message);
+            }
+          })
+          .catch(err => {
+            this.$message.error(ApiConstant.error_500);
+            console.error("error:", err);
+          });
+      },
 
+      handleCurrentChange(val) {
+        // val就是改变后的页码，有了.sync修饰，应该不需要手工变更页码
+        this.currentPage = val;
+        this.loading = true;
+        leakService.getLeaks(this, val, this.ALL_STATUS_LEAK)
+          .then(resp => {
+            let data = resp.data;
+            if (data.code === 1001) {
+              this.leaksTable = data.data;
+              this.totalCount = data.total_count;
+            } else {
+              this.$message.error(data.message);
+            }
+          })
+          .catch(err => {
+            this.$message.error(ApiConstant.error_500);
+            console.error("error:", err);
+          })
+          .then(() => {
+            this.loading = false;
+          });
+      },
+
+      // filterStatus(value, row, column) {
+      //   // console.log("value:", value, " || row:", row);
+      //   return row.status === value;
+      // },
+
+      filterChange(filter) {
+        console.log("filter:",filter);
+        this.loading = true;
+
+        let filterStatus = filter.status;
+        let queryStatus = "";
+
+        if (filterStatus.length === 0) {
+          queryStatus = this.ALL_STATUS_LEAK;
+        } else {
+          queryStatus = filterStatus.join(",");
+        }
+
+        leakService.getLeaks(this, 1, queryStatus)
+          .then(resp => {
+            let data = resp.data;
+            if (data.code === 1001) {
+              this.currentPage = 1;
+              this.totalCount = data.total_count;
+              this.leaksTable = data.data;
+            } else {
+              this.$message.error(data.message);
+            }
+          })
+          .catch(err => {
+            this.$message.error(ApiConstant.error_500);
+            console.error("error:", err);
+          })
+          .then(() => {
+            this.loading = false;
+          })
+      },
     }
   }
 </script>
 
 <style>
-  .demo-table-expand {
-    font-size: 0;
-  }
-
-  .demo-table-expand label {
-    width: 90px;
-    color: #99a9bf;
-  }
+    .demo-table-expand {
+        font-size: 0;
+    }
 
-  .demo-table-expand .el-form-item {
-    margin-right: 0;
-    margin-bottom: 0;
-  }
+    .demo-table-expand label {
+        width: 90px;
+        color: #99a9bf;
+    }
 
-  .url {
-    text-decoration: none;
-    color: #606266;
-  }
+    .url {
+        text-decoration: none;
+        color: #606266;
+    }
 
-  .url:visited {
-    text-decoration: none;
-    color: #606266;
-  }
+    .url:visited {
+        text-decoration: none;
+        color: #606266;
+    }
 </style>
diff --git a/geye-fe/src/components/utils/searchResultItem.vue b/geye-fe/src/components/utils/searchResultItem.vue
@@ -78,7 +78,7 @@
         searchResultsService.confirm(this, {"id": this.item.id})
           .then(resp => {
             if (resp.data.code === 1001) {
-              this.hasShow = false;
+              // this.hasShow = false;
               this.$message.success("已确认信息泄露！")
             } else {
               this.$message.error(resp.data.message);

diff --git a/geye-fe/src/services/handleCenter/searchCenter.js b/geye-fe/src/services/handleCenter/searchCenter.js
@@ -20,7 +20,7 @@ export default {
   },
 
   confirm(ctx, data) {
-    return ctx.axios.post(API_LIST.ignoreResult, data);
+    return ctx.axios.post(API_LIST.confirmResult, data);
   },
 
 }
diff --git a/geye-fe/src/services/leaks.js b/geye-fe/src/services/leaks.js
@@ -6,6 +6,7 @@ const BASE_API = config.BASE_API;
 const API_LIST = {
   getLeaks: BASE_API + "/api/v1/leaks/all",
   deleteLeak: BASE_API + "/api/v1/leaks/delete",
+  changeStatusLeak: BASE_API + "/api/v1/leaks/change_status",
 };
 
 export default {
@@ -22,6 +23,14 @@ export default {
       id: id
     };
     return ctx.axios.post(API_LIST.deleteLeak, data);
+  },
+
+  changeStatusLeak(ctx, action ,id) {
+    let data = {
+      id: id,
+      action: action
+    };
+    return ctx.axios.post(API_LIST.changeStatusLeak, data);
   }
 
 }