新增审计日志的搜索功能

web/src/pages/set/Audit.vue

@@ -1,6 +1,56 @@
 <template>
   <div>
     <el-card>
+      <el-form :model="searchForm" :rules="rules" ref="searchForm" :inline="true" class="form-inner-error">
+        <el-form-item label="用户名:" prop="username">
+          <el-input size="small" v-model="searchForm.username" style="width: 130px" @keydown.enter.native="searchEnterFun"></el-input>
+        </el-form-item>
+        <el-form-item label="源IP地址:" prop="src">
+          <el-input size="small" v-model="searchForm.src" style="width: 130px" @keydown.enter.native="searchEnterFun"></el-input>
+        </el-form-item>    
+        <el-form-item label="目的IP地址:" prop="dst">
+          <el-input size="small" v-model="searchForm.dst" style="width: 130px" @keydown.enter.native="searchEnterFun"></el-input>
+        </el-form-item> 
+        <el-form-item label="目的端口:" prop="dst_port">
+          <el-input size="small" v-model="searchForm.dst_port" style="width: 80px" @keydown.enter.native="searchEnterFun"></el-input>
+        </el-form-item> 
+        <el-form-item label="访问协议：">
+            <el-select size="small" v-model="searchForm.access_proto" style="width: 100px">
+                    <el-option v-for="(item,index) in access_proto" :key="index" :label="item.text" :value="item.value">
+                    </el-option>
+            </el-select>           
+        </el-form-item>  
+        <div>
+        <el-form-item label="日期范围：">
+            <el-date-picker
+                v-model="searchForm.date"
+                type="datetimerange"
+                size="small"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                range-separator="～"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+            >
+            </el-date-picker>
+        </el-form-item>
+        <el-form-item label="详情:">
+          <el-input size="small" v-model="searchForm.info" placeholder="请输入关键字" style="width: 200px" @keydown.enter.native="searchEnterFun"></el-input>
+        </el-form-item>         
+        <el-form-item>
+          <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-search"
+              @click="handleSearch">搜索
+          </el-button>
+          <el-button
+              size="small"
+              icon="el-icon-refresh"
+              @click="rest">重置搜索
+          </el-button>
+        </el-form-item>
+        </div>
+      </el-form>
 
       <el-table
           ref="multipleTable"
@@ -102,8 +152,9 @@ export default {
     this.$emit('update:route_path', this.$route.path)
     this.$emit('update:route_name', ['基础信息', '审计日志'])
   },
-  mounted() {
+  mounted() {    
     this.getData(1)
+    this.setSearchData()
   },
   data() {
     return {
@@ -111,13 +162,55 @@ export default {
       count: 10,
       nowIndex: 0,
       accessProtoArr:["", "UDP", "TCP", "HTTPS", "HTTP"], 
+      defSearchForm: {username:'', src:'', dst:'', dst_port:'', access_proto:'', info:'', date:["",""]},
+      searchForm: {},
+      access_proto: [
+            { text: '请选择', value: '' },
+            { text: 'UDP', value: '1' },
+            { text: 'TCP', value: '2' },
+            { text: 'HTTPS', value: '3' },
+            { text: 'HTTP', value: '4' },
+      ],
+      rules: {
+        username: [
+          {max: 30, message: '长度小于 30 个字符', trigger: 'blur'}
+        ],
+        src: [
+          {  message: '请输入正确的IP地址', validator: this.validateIP, trigger: 'blur' },
+        ],        
+        dst: [
+          { message: '请输入正确的IP地址', validator: this.validateIP, trigger: 'blur' },
+        ],               
+      },            
     }
   },
   methods: {
+    setSearchData() {
+        this.searchForm = JSON.parse(JSON.stringify(this.defSearchForm));
+    },    
+    handleSearch() {
+      this.$refs["searchForm"].validate((valid) => {
+        if (!valid) {
+          console.log('error submit!!');
+          return false;
+        }
+        this.getData(1)
+      })          
+    },
+    searchEnterFun(e) {
+        var keyCode = window.event ? e.keyCode : e.which;
+        if (keyCode == 13) {
+            this.handleSearch()
+        }
+    },        
     getData(p) {
+      if (! this.searchForm.date) {
+        this.searchForm.date = ["", ""];
+      }        
       axios.get('/set/audit/list', {
         params: {
           page: p,
+          search: this.searchForm,
         }
       }).then(resp => {
         var data = resp.data.data
@@ -158,6 +251,23 @@ export default {
         }
         return this.accessProtoArr[access_proto]
     },
+    rest() {
+        console.log("rest");
+        this.setSearchData();
+        this.handleSearch();
+    }, 
+    validateIP(rule, value, callback) {
+        if (value === '' || typeof value === 'undefined' || value == null) {
+            callback()
+        } else {
+            const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+            if ((!reg.test(value)) && value !== '') {
+            callback(new Error('请输入正确的IP地址'))
+            } else {
+            callback()
+            }
+        }
+    },        
   },
 }
 </script>