1

admin/src/views/subscription/plans.vue

@@ -1,34 +1,46 @@
 <template>
-  <div class="sub-page">
-    <div class="sub-toolbar">
-      <h2 class="sub-title">套餐</h2>
-      <Button type="primary" @click="openEdit(null)">新增套餐</Button>
-      <Button class="ml8" @click="load(1)">刷新</Button>
-      <Button class="ml8" @click="doExport">导出 CSV</Button>
-    </div>
-    <div class="sub-search">
-      <Form inline :label-width="70">
+  <div class="content-view">
+    <div class="table-head-tool">
+      <div class="table-title-row">
+        <h2 class="table-title">套餐</h2>
+        <Button type="primary" @click="openEdit(null)">新增套餐</Button>
+      </div>
+
+      <Form ref="formInline" :model="param.seachOption" inline :label-width="80">
         <FormItem label="条件">
           <Select v-model="param.seachOption.key" style="width: 140px">
             <Option value="plan_code">编码</Option>
             <Option value="plan_name">名称</Option>
             <Option value="status">状态</Option>
           </Select>
-          <Input v-model="param.seachOption.value" class="ml8" style="width: 220px" search @on-search="load(1)" />
+          <Input
+            v-model="param.seachOption.value"
+            class="ml10"
+            style="width: 220px"
+            search
+            @on-search="load(1)"
+          />
+        </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>
 
     <Modal v-model="modal" :title="form.id ? '编辑套餐' : '新增套餐'" width="720" :loading="saving" @on-ok="save">
@@ -239,30 +251,47 @@ export default {
         this.$Message.error((res && res.message) || '导出失败')
       }
     },
+    resetQuery() {
+      this.param.seachOption = { key: 'plan_code', 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-search {
-  margin-bottom: 12px;
+
+.table-body {
 }
-.sub-page-bar {
+
+.table-page-bar {
   margin-top: 12px;
   text-align: right;
 }