1

admin/src/views/subscription/subscriptions.vue

@@ -1,15 +1,14 @@
 <template>
-  <div class="sub-page">
-    <div class="sub-toolbar">
-      <h2 class="sub-title">订阅</h2>
-      <Button type="primary" @click="openOpen">开通订阅</Button>
-      <Button class="ml8" @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>
+        <Button type="primary" @click="openOpen">开通订阅</Button>
+      </div>
+
+      <Form ref="formInline" :model="param.seachOption" inline :label-width="80">
         <FormItem label="用户ID">
-          <Input v-model="param.seachOption.value" style="width: 140px" placeholder="筛选 user_id" />
+          <Input v-model="param.seachOption.value" style="width: 140px" placeholder="筛选 user_id" class="ml10" />
         </FormItem>
         <FormItem>
           <Select v-model="param.seachOption.key" style="width: 120px">
@@ -17,19 +16,26 @@
             <Option value="status">状态</Option>
           </Select>
         </FormItem>
-        <Button type="primary" @click="load(1)">查询</Button>
+        <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>
       </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>
 
     <Modal v-model="openModal" title="开通订阅" width="640" :loading="saving" @on-ok="submitOpen">
@@ -264,27 +270,44 @@ export default {
         this.$Message.error((res && res.message) || '导出失败')
       }
     },
+    resetQuery() {
+      this.param.seachOption = { key: 'user_id', value: '' }
+      this.load(1)
+    },
   },
 }
 </script>
 
 <style scoped>
-.sub-page {
+.content-view {
   padding: 16px;
 }
-.sub-toolbar {
+
+.table-head-tool {
   margin-bottom: 12px;
 }
-.sub-title {
-  display: inline-block;
-  margin: 0 16px 0 0;
-  font-size: 18px;
-  vertical-align: middle;
+
+.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;
+}
+
 .ml8 {
   margin-left: 8px;
 }
-.sub-page-bar {
+
+.table-page-bar {
   margin-top: 12px;
   text-align: right;
 }