1

admin/src/views/subscription/subscriptions.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="content-view">
     <div class="table-head-tool">
-      <div class="table-title-row">
-        <Button type="primary" @click="openOpen">开通订阅</Button>
-      </div>
-
       <Form ref="formInline" :model="param.seachOption" inline :label-width="80">
+        <FormItem>
+          <Button type="primary" @click="openOpen">开通订阅</Button>
+        </FormItem>
         <FormItem label="筛选">
           <Select v-model="param.seachOption.key" style="width: 120px" @on-change="onSearchKeyChange">
             <Option value="user_id">用户</Option>
@@ -29,8 +28,12 @@
         </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>
+          <Dropdown trigger="click" class="ml10" @on-click="on_toolbar_more">
+            <Button type="default">更多 <Icon type="ios-arrow-down" /></Button>
+            <DropdownMenu slot="list">
+              <DropdownItem name="export">导出 CSV</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         </FormItem>
       </Form>
     </div>
@@ -137,13 +140,37 @@ export default {
         {
           title: '操作',
           key: 'a',
-          width: 200,
+          width: 120,
           render: (h, p) =>
-            h('div', [
-              h('Button', { props: { size: 'small' }, on: { click: () => this.openRenew(p.row) } }, '续费'),
-              h('Button', { props: { size: 'small' }, class: { ml8: true }, on: { click: () => this.openUpgrade(p.row) } }, '编辑'),
-              h('Button', { props: { type: 'error', size: 'small' }, class: { ml8: true }, on: { click: () => this.doCancel(p.row) } }, '取消'),
-            ]),
+            h(
+              'Dropdown',
+              {
+                props: { trigger: 'click', transfer: true },
+                on: {
+                  'on-click': (name) => {
+                    if (name === 'renew') this.openRenew(p.row)
+                    else if (name === 'edit') this.openUpgrade(p.row)
+                    else if (name === 'cancel') this.doCancel(p.row)
+                  },
+                },
+              },
+              [
+                h(
+                  'Button',
+                  { props: { type: 'primary', size: 'small' } },
+                  ['操作 ', h('Icon', { props: { type: 'ios-arrow-down' } })]
+                ),
+                h(
+                  'DropdownMenu',
+                  { slot: 'list' },
+                  [
+                    h('DropdownItem', { props: { name: 'renew' } }, '续费'),
+                    h('DropdownItem', { props: { name: 'edit' } }, '编辑订阅'),
+                    h('DropdownItem', { props: { name: 'cancel' } }, '取消订阅'),
+                  ]
+                ),
+              ]
+            ),
         },
       ]
     },
@@ -314,6 +341,9 @@ export default {
         },
       })
     },
+    on_toolbar_more(name) {
+      if (name === 'export') this.doExport()
+    },
     async doExport() {
       const res = await subscriptionsServer.exportRows({ param: this.param })
       if (res && res.code === 0 && res.data && res.data.rows) {
@@ -323,10 +353,6 @@ export default {
         this.$Message.error((res && res.message) || '导出失败')
       }
     },
-    resetQuery() {
-      this.param.seachOption = { key: 'user_id', value: '' }
-      this.load(1)
-    },
   },
 }
 </script>
@@ -344,13 +370,6 @@ export default {
   margin-bottom: 16px;
 }
 
-.table-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-bottom: 12px;
-}
-
 .ml10 {
   margin-left: 10px;
 }