1

admin/src/views/subscription/audit_log.vue

@@ -1,32 +1,38 @@
 <template>
-  <div class="sub-page">
-    <div class="sub-toolbar">
-      <h2 class="sub-title">审计日志</h2>
-      <Button type="primary" @click="load(1)">刷新</Button>
-      <Button class="ml8" @click="doExport">导出 CSV</Button>
-    </div>
-    <div class="sub-search">
-      <Form inline>
+  <div class="content-view">
+    <div class="table-head-tool">
+      <div class="table-title-row">
+        <h2 class="table-title">审计日志</h2>
+      </div>
+
+      <Form ref="formInline" :model="param.seachOption" inline :label-width="80">
         <FormItem label="动作">
           <Select v-model="param.seachOption.key" style="width: 140px">
             <Option value="action">action</Option>
             <Option value="resource_type">resource_type</Option>
           </Select>
-          <Input v-model="param.seachOption.value" class="ml8" style="width: 220px" placeholder="模糊/精确" />
+          <Input v-model="param.seachOption.value" class="ml10" style="width: 220px" placeholder="模糊/精确" />
+        </FormItem>
+        <FormItem>
+          <Button type="primary" @click="load(1)">查询</Button>
+          <Button type="default" @click="resetQuery" class="ml10">重置</Button>
+          <Button type="default" @click="doExport" class="ml10">导出 CSV</Button>
         </FormItem>
-        <Button type="primary" @click="load(1)">查询</Button>
       </Form>
     </div>
-    <Table :columns="columns" :data="rows" border stripe />
-    <div class="sub-page-bar">
-      <Page
-        :total="total"
-        :current="param.pageOption.page"
-        :page-size="param.pageOption.pageSize"
-        show-total
-        @on-change="onPage"
-        @on-page-size-change="onSize"
-      />
+
+    <div class="table-body">
+      <Table :columns="columns" :data="rows" border stripe />
+      <div class="table-page-bar">
+        <Page
+          :total="total"
+          :current="param.pageOption.page"
+          :page-size="param.pageOption.pageSize"
+          show-total
+          @on-change="onPage"
+          @on-page-size-change="onSize"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -105,26 +111,43 @@ export default {
         this.$Message.error((res && res.message) || '导出失败')
       }
     },
+    resetQuery() {
+      this.param.seachOption = { key: 'action', value: '' }
+      this.load(1)
+    },
   },
 }
 </script>
 
 <style scoped>
-.sub-page {
+.content-view {
   padding: 16px;
 }
-.sub-title {
-  display: inline-block;
-  margin: 0 16px 0 0;
-  font-size: 18px;
-}
-.ml8 {
-  margin-left: 8px;
-}
-.sub-search {
+
+.table-head-tool {
   margin-bottom: 12px;
 }
-.sub-page-bar {
+
+.table-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.table-title {
+  margin: 0;
+  font-size: 18px;
+}
+
+.ml10 {
+  margin-left: 10px;
+}
+
+.table-body {
+}
+
+.table-page-bar {
   margin-top: 12px;
   text-align: right;
 }