From 01115f7ed74b39130533d33df6a3a2586db30562 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Sun, 5 Aug 2018 22:21:17 +0800
Subject: [PATCH 01/10] =?UTF-8?q?=E5=BB=BA=E7=AB=8B=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 0dde97a01739e7b6781e76269b603dec0b8568ab [formerly 0dde97a01739e7b6781e76269b603dec0b8568ab [formerly 0dde97a01739e7b6781e76269b603dec0b8568ab [formerly 0dde97a01739e7b6781e76269b603dec0b8568ab [formerly 6afdead4b409de4ccd1a249a41ac830cd03e64b4 [formerly bfd8ca2142b19960fb74f90c592d2ffd5e4fa009]]]]]
Former-commit-id: a7df8cd67e73a9e05a8815992687b28f9810e10f
Former-commit-id: 6c2bc61c3d7df299d9fa9e0e87e4eb5b47d62d22
Former-commit-id: 6ffb62427debfde1959131ccda34f5fbb211a925 [formerly fe94bd2f32b9d83809095b2cef1c04d818b0dca3]
Former-commit-id: eac98e8b4cb6adc76743e7f8e0b00fec2ce23a9b
Former-commit-id: 38f06669ec9bdbbd5487df589789028d6b13c36c
Former-commit-id: 2f441e094279eecece11ff7f238bcecb3f7377ad
Former-commit-id: 1b7c6dd063d14ed0f80efd1c811b6f02b842f5ce
Former-commit-id: 013b3d85cb83e86ac4dbaac99b8cfd7356ffa26a
---
 src/menu/index.js                               |  9 ++++++---
 src/menu/modules/demo-business.js               | 15 +++++++++++++++
 .../index/image/icon.png.REMOVED.git-id         |  1 +
 src/pages/demo/business/index/index.vue         |  9 +++++++++
 .../table/1/componnets/PageFooter/index.vue     |  5 +++++
 .../table/1/componnets/PageHeader/index.vue     |  5 +++++
 .../table/1/componnets/PageMain/index.vue       |  5 +++++
 src/pages/demo/business/table/1/index.vue       | 17 +++++++++++++++++
 src/router/routes.js.REMOVED.git-id             |  2 +-
 9 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 src/menu/modules/demo-business.js
 create mode 100644 src/pages/demo/business/index/image/icon.png.REMOVED.git-id
 create mode 100644 src/pages/demo/business/index/index.vue
 create mode 100644 src/pages/demo/business/table/1/componnets/PageFooter/index.vue
 create mode 100644 src/pages/demo/business/table/1/componnets/PageHeader/index.vue
 create mode 100644 src/pages/demo/business/table/1/componnets/PageMain/index.vue
 create mode 100644 src/pages/demo/business/table/1/index.vue

diff --git a/src/menu/index.js b/src/menu/index.js
index 51e51931..75ae0482 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -8,6 +8,8 @@ import demoCharts from './modules/demo-charts'
 import demoElement from './modules/demo-element'
 // 试验台
 import demoPlayground from './modules/demo-playground'
+// 示例
+import demoBusiness from './modules/demo-business'
 
 // 菜单 侧边栏
 export const menuAside = [
@@ -15,7 +17,8 @@ export const menuAside = [
   demoPlugins,
   demoCharts,
   demoElement,
-  demoPlayground
+  demoPlayground,
+  demoBusiness
 ]
 
 // 菜单 顶栏
@@ -26,7 +29,6 @@ export const menuHeader = [
     icon: 'home'
   },
   {
-    path: '/demo',
     title: '功能',
     icon: 'puzzle-piece',
     children: [
@@ -51,5 +53,6 @@ export const menuHeader = [
         ]
       }
     ]
-  }
+  },
+  demoBusiness
 ]
diff --git a/src/menu/modules/demo-business.js b/src/menu/modules/demo-business.js
new file mode 100644
index 00000000..df067009
--- /dev/null
+++ b/src/menu/modules/demo-business.js
@@ -0,0 +1,15 @@
+export default {
+  path: '/demo/business',
+  title: '示例',
+  icon: 'flask',
+  children: (pre => [
+    { path: `${pre}index`, title: '示例首页', icon: 'home' },
+    {
+      title: '表格',
+      icon: 'table',
+      children: [
+        { path: `${pre}table/1`, title: '1' }
+      ]
+    }
+  ])('/demo/business/')
+}
diff --git a/src/pages/demo/business/index/image/icon.png.REMOVED.git-id b/src/pages/demo/business/index/image/icon.png.REMOVED.git-id
new file mode 100644
index 00000000..101ae465
--- /dev/null
+++ b/src/pages/demo/business/index/image/icon.png.REMOVED.git-id
@@ -0,0 +1 @@
+ba00e3c1f32cf9369968e9ce1a5d9e6164f3c07c
\ No newline at end of file
diff --git a/src/pages/demo/business/index/index.vue b/src/pages/demo/business/index/index.vue
new file mode 100644
index 00000000..b895748f
--- /dev/null
+++ b/src/pages/demo/business/index/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <d2-container>
+    <d2-page-cover
+      title="图表"
+      sub-title="集成图表组件">
+      <img src="./image/icon.png">
+    </d2-page-cover>
+  </d2-container>
+</template>
diff --git a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
new file mode 100644
index 00000000..dcead51f
--- /dev/null
+++ b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    footer
+  </div>
+</template>
diff --git a/src/pages/demo/business/table/1/componnets/PageHeader/index.vue b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
new file mode 100644
index 00000000..00eb48a3
--- /dev/null
+++ b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    header
+  </div>
+</template>
diff --git a/src/pages/demo/business/table/1/componnets/PageMain/index.vue b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
new file mode 100644
index 00000000..fe504e93
--- /dev/null
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    main
+  </div>
+</template>
diff --git a/src/pages/demo/business/table/1/index.vue b/src/pages/demo/business/table/1/index.vue
new file mode 100644
index 00000000..6aa6031d
--- /dev/null
+++ b/src/pages/demo/business/table/1/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <d2-container>
+    <demo-page-header slot="header"/>
+    <demo-page-main/>
+    <demo-page-footer slot="footer"/>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  components: {
+    'DemoPageHeader': () => import('./componnets/PageHeader'),
+    'DemoPageMain': () => import('./componnets/PageMain'),
+    'DemoPageFooter': () => import('./componnets/PageFooter')
+  }
+}
+</script>
diff --git a/src/router/routes.js.REMOVED.git-id b/src/router/routes.js.REMOVED.git-id
index 1e67b886..21708707 100644
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-0fa9b5a2bdc57841e4f19831dc3e2a913399a280
\ No newline at end of file
+b3aa52d67ec41a212ff824829e2d713f2c21111c
\ No newline at end of file

From daa3ccb798fed58fa66ef2192ae70bb9a6a6fd2a Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Mon, 6 Aug 2018 10:45:45 +0800
Subject: [PATCH 02/10] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E5=AD=98=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: c3f26030318f42d19e45760b84f127a9fa0f8010 [formerly c3f26030318f42d19e45760b84f127a9fa0f8010 [formerly c3f26030318f42d19e45760b84f127a9fa0f8010 [formerly c3f26030318f42d19e45760b84f127a9fa0f8010 [formerly baf913370e890b66c5362ef0b91ef5db294166e1 [formerly e639100e00f1418900c57d39864dfdb806a4d99b]]]]]
Former-commit-id: 08d6e4a635cf122d2c2ddec02ef361daba543a4d
Former-commit-id: 8a5c8f0bb71e1ae2cca3fc4119b4b9dcfb6c43b0
Former-commit-id: 234b0fd329e12597fa600237802f7b53f085b1d1 [formerly c2067e7e02f3beb7738ee64fbae0ac5fa43b1629]
Former-commit-id: ce100562eade5a4a8aab73ff242c45b783961aa2
Former-commit-id: 7556c751d0c13bd75d2c1142f302ff5bc6a32258
Former-commit-id: 77d6731bfe01c61a6fe28337168c2fa5e58015c9
Former-commit-id: afc2d950bac686de249f934359afe2a2bf27335d
Former-commit-id: 04be92fa4756f43ede6b8d9c983663f877284388
---
 src/mock/demo/business/table/1/index.js       |  20 ++++
 src/mock/register.js                          |   2 +
 .../table/1/componnets/PageHeader/index.vue   |  96 ++++++++++++++-
 .../table/1/componnets/PageMain/index.vue     | 111 +++++++++++++++++-
 src/pages/demo/business/table/1/index.vue     |  20 +++-
 5 files changed, 241 insertions(+), 8 deletions(-)
 create mode 100644 src/mock/demo/business/table/1/index.js

diff --git a/src/mock/demo/business/table/1/index.js b/src/mock/demo/business/table/1/index.js
new file mode 100644
index 00000000..88ad6d55
--- /dev/null
+++ b/src/mock/demo/business/table/1/index.js
@@ -0,0 +1,20 @@
+import Mock from 'mockjs'
+
+Mock.mock('/api/demo/business/table/1', ({ body }) => {
+  // 这是通过 post 传来的参数
+  body = JSON.parse(body)
+  return Mock.mock(
+    {
+      'list|30': [{
+        'key': '@guid',
+        'value|1': [10, 100, 200, 500],
+        'type': '@boolean',
+        'admin': '@cname',
+        'adminNote': '@cparagraph(0.5)',
+        'dateTimeCreat': '@datetime',
+        'used': '@boolean',
+        'dateTimeUse': '@datetime'
+      }]
+    }
+  )
+})
diff --git a/src/mock/register.js b/src/mock/register.js
index 10582b39..b72817ac 100644
--- a/src/mock/register.js
+++ b/src/mock/register.js
@@ -2,6 +2,8 @@ import Mock from 'mockjs'
 
 import '@/mock/ajax-demo'
 
+import '@/mock/demo/business/table/1'
+
 import '@/mock/login'
 
 // 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
diff --git a/src/pages/demo/business/table/1/componnets/PageHeader/index.vue b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
index 00eb48a3..66641ef3 100644
--- a/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
@@ -1,5 +1,95 @@
 <template>
-  <div>
-    header
-  </div>
+  <el-form
+    :inline="true"
+    :model="form"
+    :rules="rules"
+    ref="form"
+    size="mini"
+    style="margin-bottom: -18px;">
+    
+    <el-form-item label="状态" prop="type">
+      <el-select
+        v-model="form.type"
+        placeholder="状态选择"
+        style="width: 100px;">
+        <el-option label="状态 1" value="1"></el-option>
+        <el-option label="状态 2" value="2"></el-option>
+        <el-option label="状态 3" value="3"></el-option>
+        <el-option label="状态 4" value="4"></el-option>
+        <el-option label="状态 5" value="5"></el-option>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="用户" prop="user">
+      <el-input
+        v-model="form.user"
+        placeholder="用户"
+        style="width: 80px;"/>
+    </el-form-item>
+
+    <el-form-item label="卡密" prop="key">
+      <el-input
+        v-model="form.key"
+        placeholder="卡密"
+        style="width: 120px;"/>
+    </el-form-item>
+
+    <el-form-item label="备注" prop="note">
+      <el-input
+        v-model="form.note"
+        placeholder="备注"
+        style="width: 120px;"/>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button
+        type="primary"
+        @click="submitForm('form')">
+        <d2-icon name="search"/>
+        查询
+      </el-button>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button
+        @click="resetForm('form')">
+        <d2-icon name="refresh"/>
+        重置
+      </el-button>
+    </el-form-item>
+
+  </el-form>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+      form: {
+        type: '1',
+        user: 'FairyEver',
+        key: '',
+        note: ''
+      },
+      rules: {
+        type: [ { required: true, message: '请选择一个状态', trigger: 'change' } ],
+        user: [ { required: true, message: '请输入用户', trigger: 'change' } ]
+      }
+    }
+  },
+  methods: {
+    submitForm (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit('submit', this.form)
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm (formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/business/table/1/componnets/PageMain/index.vue b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
index fe504e93..e37434be 100644
--- a/src/pages/demo/business/table/1/componnets/PageMain/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -1,5 +1,110 @@
 <template>
-  <div>
-    main
-  </div>
+  <el-table
+    :data="currentTableData"
+    size="mini"
+    stripe
+    style="width: 100%">
+
+    <el-table-column label="卡密" :show-overflow-tooltip="true">
+      <template slot-scope="scope">
+        {{scope.row.key}}
+      </template>
+    </el-table-column>
+
+    <el-table-column label="面值" width="60" align="center">
+      <template slot-scope="scope">
+        <el-tag
+          size="mini"
+          type="info">
+          {{scope.row.value}}
+        </el-tag>
+      </template>
+    </el-table-column>
+
+    <el-table-column label="状态" width="260" align="center">
+      <template slot-scope="scope">
+        <el-popover
+          placement="left"
+          title="切换状态"
+          width="200"
+          trigger="hover">
+          <el-switch
+            v-model="currentTableData[scope.$index].type"
+            active-color="#67C23A"
+            inactive-color="#F56C6C"
+            active-text="正常"
+            inactive-text="禁用"
+            @change="(val) => {
+              handleSwitchChange(val, scope.$index)
+            }">
+          </el-switch>
+          <el-tag slot="reference" size="mini">
+            {{scope.row.type}}
+          </el-tag>
+        </el-popover>
+      </template>
+    </el-table-column>
+
+    <el-table-column label="管理员" width="60">
+      <template slot-scope="scope">
+        {{scope.row.admin}}
+      </template>
+    </el-table-column>
+
+    <el-table-column label="管理员备注" :show-overflow-tooltip="true">
+      <template slot-scope="scope">
+        {{scope.row.adminNote}}
+      </template>
+    </el-table-column>
+
+    <el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
+      <template slot-scope="scope">
+        {{scope.row.dateTimeCreat}}
+      </template>
+    </el-table-column>
+
+    <el-table-column label="使用状态" width="100" align="center">
+      <template slot-scope="scope">
+        <el-tag v-if="scope.row.used" type="mini">已经使用</el-tag>
+        <el-tag v-else type="mini">未使用</el-tag>
+      </template>
+    </el-table-column>
+
+    <el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
+      <template slot-scope="scope">
+        {{scope.row.dateTimeUse}}
+      </template>
+    </el-table-column>
+
+  </el-table>
 </template>
+
+<script>
+export default {
+  props: {
+    tableData: {
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      currentTableData: []
+    }
+  },
+  watch: {
+    tableData: {
+      handler (val) {
+        this.currentTableData = val
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleSwitchChange (val, index) {
+      console.log('val', val)
+      console.log('index', index)
+    }
+  }
+}
+</script>
+
diff --git a/src/pages/demo/business/table/1/index.vue b/src/pages/demo/business/table/1/index.vue
index 6aa6031d..459092a2 100644
--- a/src/pages/demo/business/table/1/index.vue
+++ b/src/pages/demo/business/table/1/index.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container>
-    <demo-page-header slot="header"/>
-    <demo-page-main/>
+    <demo-page-header slot="header" @submit="handleSubmit"/>
+    <demo-page-main :table-data="table"/>
     <demo-page-footer slot="footer"/>
   </d2-container>
 </template>
@@ -12,6 +12,22 @@ export default {
     'DemoPageHeader': () => import('./componnets/PageHeader'),
     'DemoPageMain': () => import('./componnets/PageMain'),
     'DemoPageFooter': () => import('./componnets/PageFooter')
+  },
+  data () {
+    return {
+      table: []
+    }
+  },
+  methods: {
+    handleSubmit (form) {
+      this.$axios.post('/api/demo/business/table/1', form)
+        .then(res => {
+          this.table = res.list
+        })
+        .catch(err => {
+          console.log('err', err)
+        })
+    }
   }
 }
 </script>

From 96563aedd98e25148fe5edd9349e3695a00cfda7 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Mon, 6 Aug 2018 23:20:19 +0800
Subject: [PATCH 03/10] =?UTF-8?q?=E5=88=86=E9=A1=B5=E6=8E=A7=E4=BB=B6?=
 =?UTF-8?q?=E5=92=8C=E8=A1=A8=E6=A0=BC=E6=98=BE=E7=A4=BA=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: e21a00c95c644d8135619e166b4fc8c7c2111c01 [formerly e21a00c95c644d8135619e166b4fc8c7c2111c01 [formerly e21a00c95c644d8135619e166b4fc8c7c2111c01 [formerly e21a00c95c644d8135619e166b4fc8c7c2111c01 [formerly 660af7b4d44705170e6d62dbd1b802a98eb25a7a [formerly 10433771479b69c21669a72ea1ed14f5ec6a6a5f]]]]]
Former-commit-id: d2dcdbfa394d231cb3a36a367cd8b53d55a873df
Former-commit-id: 87558ca229f720418110b9626375cd562cd33036
Former-commit-id: 6849a75e8df0342b7ff36adefeb85a6c8cafbdf0 [formerly 9380d34b9f1321cd5e2d382ebe839ce27f09b85e]
Former-commit-id: d4ccfa0d90cd15562532dd0aee0f472b7ce8e3c6
Former-commit-id: ec97fb45869d97a07c1c78eb125a1dbe07c8ee3d
Former-commit-id: 3fbc39660de71875f2eb031d1ddce10318911333
Former-commit-id: 1363e5c8b2b0e5c3d20a7087a54f75165ec0fe52
Former-commit-id: 640627b6e451e30290615dc3cd23539e621c27ca
---
 .../table/1/componnets/PageFooter/index.vue   | 35 +++++++++++++++++--
 .../table/1/componnets/PageMain/index.vue     |  2 +-
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
index dcead51f..9fa48b6e 100644
--- a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
@@ -1,5 +1,34 @@
 <template>
-  <div>
-    footer
-  </div>
+  <el-pagination
+    :current-page="page.current"
+    :page-size="page.size"
+    :total="page.total"
+    :page-sizes="[100, 200, 300, 400]"
+    layout="total, sizes, prev, pager, next, jumper"
+    style="margin: -10px;"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange">
+  </el-pagination>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+      page: {
+        current: 1,
+        size: 100,
+        total: 400
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/business/table/1/componnets/PageMain/index.vue b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
index e37434be..c874ddbb 100644
--- a/src/pages/demo/business/table/1/componnets/PageMain/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -21,7 +21,7 @@
       </template>
     </el-table-column>
 
-    <el-table-column label="状态" width="260" align="center">
+    <el-table-column label="状态" width="60" align="center">
       <template slot-scope="scope">
         <el-popover
           placement="left"

From 5c546dca9502001698581dd8d27942bec8c5e698 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 7 Aug 2018 09:02:43 +0800
Subject: [PATCH 04/10] =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=88=97=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E5=99=A8=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 0e03e0fea7fbaacf1c2d8ff2411c151d0aef433c [formerly 0e03e0fea7fbaacf1c2d8ff2411c151d0aef433c [formerly 0e03e0fea7fbaacf1c2d8ff2411c151d0aef433c [formerly 0e03e0fea7fbaacf1c2d8ff2411c151d0aef433c [formerly ce25e70b23df7f428a514a7a92790de70a393274 [formerly 0dc8f4cd9be176aae57942767a315623d104932d]]]]]
Former-commit-id: 9b38b47bc438321aa72180f9a170af8f92a9e77d
Former-commit-id: 01108104a6d5c36e474fdfb7ec0b0b8d73048221
Former-commit-id: 0cfebf110b20794e2690674ac285e3cba5280ae4 [formerly 5b9e9a9d9bef2e6d37eeb2630ad73d9f0494d967]
Former-commit-id: fd0ff1d79aebf7f13218e0149e1948083e1ba904
Former-commit-id: 7e1ede18df14c10daf4a25fdb509518929fb9d96
Former-commit-id: af50aad4bfb60e7b5ed9b6ca991e51a2f3490df2
Former-commit-id: 3462539ef1c1bba8d6efc7f52e95930515f1e108
Former-commit-id: b882ff02952b1f164f061ab090174018ee9afb4a
---
 .../table/1/componnets/PageMain/index.vue     | 53 ++++++------
 .../table/1/componnets/TypeControl/index.vue  | 85 +++++++++++++++++++
 2 files changed, 114 insertions(+), 24 deletions(-)
 create mode 100644 src/pages/demo/business/table/1/componnets/TypeControl/index.vue

diff --git a/src/pages/demo/business/table/1/componnets/PageMain/index.vue b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
index c874ddbb..af5415c8 100644
--- a/src/pages/demo/business/table/1/componnets/PageMain/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -15,7 +15,7 @@
       <template slot-scope="scope">
         <el-tag
           size="mini"
-          type="info">
+          type="success">
           {{scope.row.value}}
         </el-tag>
       </template>
@@ -23,25 +23,20 @@
 
     <el-table-column label="状态" width="60" align="center">
       <template slot-scope="scope">
-        <el-popover
-          placement="left"
-          title="切换状态"
-          width="200"
-          trigger="hover">
-          <el-switch
-            v-model="currentTableData[scope.$index].type"
-            active-color="#67C23A"
-            inactive-color="#F56C6C"
-            active-text="正常"
-            inactive-text="禁用"
-            @change="(val) => {
-              handleSwitchChange(val, scope.$index)
-            }">
-          </el-switch>
-          <el-tag slot="reference" size="mini">
-            {{scope.row.type}}
-          </el-tag>
-        </el-popover>
+        <type-control
+          :value="scope.row.type"
+          @change="(val) => {
+            handleSwitchChange(val, scope.$index)
+          }">
+          <d2-icon
+            name="check-circle"
+            style="font-size: 20px; line-height: 32px; color: #67C23A;"
+            slot="active"/>
+          <d2-icon
+            name="times-circle"
+            style="font-size: 20px; line-height: 32px; color: #F56C6C;"
+            slot="inactive"/>
+        </type-control>
       </template>
     </el-table-column>
 
@@ -65,8 +60,11 @@
 
     <el-table-column label="使用状态" width="100" align="center">
       <template slot-scope="scope">
-        <el-tag v-if="scope.row.used" type="mini">已经使用</el-tag>
-        <el-tag v-else type="mini">未使用</el-tag>
+        <el-tag
+          size="mini"
+          :type="scope.row.used ? 'info' : ''">
+          {{scope.row.used ? '已使用' : '未使用'}}
+        </el-tag>
       </template>
     </el-table-column>
 
@@ -80,7 +78,11 @@
 </template>
 
 <script>
+import TypeControl from '../TypeControl'
 export default {
+  components: {
+    TypeControl
+  },
   props: {
     tableData: {
       default: () => []
@@ -101,8 +103,11 @@ export default {
   },
   methods: {
     handleSwitchChange (val, index) {
-      console.log('val', val)
-      console.log('index', index)
+      const oldValue = this.currentTableData[index]
+      this.$set(this.currentTableData, index, {
+        ...oldValue,
+        type: val
+      })
     }
   }
 }
diff --git a/src/pages/demo/business/table/1/componnets/TypeControl/index.vue b/src/pages/demo/business/table/1/componnets/TypeControl/index.vue
new file mode 100644
index 00000000..1a30e4b0
--- /dev/null
+++ b/src/pages/demo/business/table/1/componnets/TypeControl/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-popover
+    :placement="popoverPlacement"
+    :title="popoverTitle"
+    :width="popoverWidth"
+    trigger="hover">
+    <el-switch
+      v-model="currentValue"
+      :active-color="activeColor"
+      :inactive-color="inactiveColor"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+      :disabled="switchDisabled"
+      @change="handleChange">
+    </el-switch>
+    <span slot="reference">
+      <slot v-if="value" name="active"/>
+      <slot v-else name="inactive"/>
+    </span>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      default: false
+    },
+    popoverPlacement: {
+      default: 'left'
+    },
+    popoverTitle: {
+      default: '修改'
+    },
+    popoverWidth: {
+      default: '150'
+    },
+    activeColor: {
+      default: '#67C23A'
+    },
+    inactiveColor: {
+      default: '#F56C6C'
+    },
+    activeText: {
+      default: '正常'
+    },
+    inactiveText: {
+      default: '禁用'
+    }
+  },
+  data () {
+    return {
+      currentValue: false,
+      switchDisabled: false
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        this.currentValue = val
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleChange (val) {
+      this.switchDisabled = true
+      this.$message({
+        message: '正在发送请求',
+        type: 'info'
+      })
+      // 请将 setTimeout 修改为您的异步请求
+      setTimeout(() => {
+        this.switchDisabled = false
+        this.$message({
+          message: '修改成功',
+          type: 'success'
+        })
+        this.$emit('change', val)
+        // 如果修改失败的话需要在这里手动将 currentValue 复原
+      }, 1000)
+    }
+  }
+}
+</script>

From 07649ec525190e5bb50dfb8c2d3d10a2c6709002 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 7 Aug 2018 09:17:27 +0800
Subject: [PATCH 05/10] TypeControlMini

Former-commit-id: 544bb95921573b62571f41ecf94f668f61960273 [formerly 544bb95921573b62571f41ecf94f668f61960273 [formerly 544bb95921573b62571f41ecf94f668f61960273 [formerly 544bb95921573b62571f41ecf94f668f61960273 [formerly d0dbb0b9a36572979b0177bf701b4cbf8549118b [formerly 4c0015c234e1e46ce269cb6ac613651a7a13e1b6]]]]]
Former-commit-id: 38a553b240cc9f79e66046aaa69f2a9559855435
Former-commit-id: 01e39256915db1c83b4c91b69db939e4534789f3
Former-commit-id: 2ddc7c21212e278eb3a1585ad180724fcd07ae6d [formerly adc0a315f6460f844897605cef5dd495ca72488a]
Former-commit-id: 7a66d40d5cea27bbc4cbff3aefe68588bcc08706
Former-commit-id: 2d9fd9a88c21e33d5ce9681ddd98aa307f0f6254
Former-commit-id: d3035c2261163bd59e56161405e306c98bb346f8
Former-commit-id: 2080bb4babd91fa7c9f7434cc1539758d812133b
Former-commit-id: ad505fc840311ec7de1c144a5a31027cffa195e0
---
 .../table/1/componnets/PageMain/index.vue     | 26 +++++++-
 .../table/1/componnets/TypeControl/index.vue  |  8 +--
 .../1/componnets/TypeControlMini/index.vue    | 64 +++++++++++++++++++
 3 files changed, 92 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/demo/business/table/1/componnets/TypeControlMini/index.vue

diff --git a/src/pages/demo/business/table/1/componnets/PageMain/index.vue b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
index af5415c8..9f4aed3d 100644
--- a/src/pages/demo/business/table/1/componnets/PageMain/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -21,7 +21,7 @@
       </template>
     </el-table-column>
 
-    <el-table-column label="状态" width="60" align="center">
+    <el-table-column label="状态" width="50" align="center">
       <template slot-scope="scope">
         <type-control
           :value="scope.row.type"
@@ -40,6 +40,25 @@
       </template>
     </el-table-column>
 
+    <el-table-column label="状态" width="50" align="center">
+      <template slot-scope="scope">
+        <type-control-mini
+          :value="scope.row.type"
+          @change="(val) => {
+            handleSwitchChange(val, scope.$index)
+          }">
+          <d2-icon
+            name="check-circle"
+            style="font-size: 20px; line-height: 32px; color: #67C23A;"
+            slot="active"/>
+          <d2-icon
+            name="times-circle"
+            style="font-size: 20px; line-height: 32px; color: #F56C6C;"
+            slot="inactive"/>
+        </type-control-mini>
+      </template>
+    </el-table-column>
+
     <el-table-column label="管理员" width="60">
       <template slot-scope="scope">
         {{scope.row.admin}}
@@ -79,9 +98,11 @@
 
 <script>
 import TypeControl from '../TypeControl'
+import TypeControlMini from '../TypeControlMini'
 export default {
   components: {
-    TypeControl
+    TypeControl,
+    TypeControlMini
   },
   props: {
     tableData: {
@@ -108,6 +129,7 @@ export default {
         ...oldValue,
         type: val
       })
+      // 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
     }
   }
 }
diff --git a/src/pages/demo/business/table/1/componnets/TypeControl/index.vue b/src/pages/demo/business/table/1/componnets/TypeControl/index.vue
index 1a30e4b0..91856e9a 100644
--- a/src/pages/demo/business/table/1/componnets/TypeControl/index.vue
+++ b/src/pages/demo/business/table/1/componnets/TypeControl/index.vue
@@ -10,7 +10,7 @@
       :inactive-color="inactiveColor"
       :active-text="activeText"
       :inactive-text="inactiveText"
-      :disabled="switchDisabled"
+      :disabled="disabled"
       @change="handleChange">
     </el-switch>
     <span slot="reference">
@@ -51,7 +51,7 @@ export default {
   data () {
     return {
       currentValue: false,
-      switchDisabled: false
+      disabled: false
     }
   },
   watch: {
@@ -64,14 +64,14 @@ export default {
   },
   methods: {
     handleChange (val) {
-      this.switchDisabled = true
+      this.disabled = true
       this.$message({
         message: '正在发送请求',
         type: 'info'
       })
       // 请将 setTimeout 修改为您的异步请求
       setTimeout(() => {
-        this.switchDisabled = false
+        this.disabled = false
         this.$message({
           message: '修改成功',
           type: 'success'
diff --git a/src/pages/demo/business/table/1/componnets/TypeControlMini/index.vue b/src/pages/demo/business/table/1/componnets/TypeControlMini/index.vue
new file mode 100644
index 00000000..9bfebbe2
--- /dev/null
+++ b/src/pages/demo/business/table/1/componnets/TypeControlMini/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <span slot="reference">
+    <d2-icon
+      v-if="disabled"
+      name="hourglass-start"
+      style="font-size: 14px; line-height: 32px; color: #909399;"/>
+    <span @click="handleClick">
+      <slot
+        v-if="!disabled && value"
+        name="active"/>
+      <slot
+        v-if="!disabled && !value"
+        name="inactive"/>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      default: false
+    }
+  },
+  data () {
+    return {
+      currentValue: false,
+      disabled: false
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        this.currentValue = val
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleClick () {
+      // 这里先赋值是为了和 TypeControl 使用一样的 handleChange
+      this.currentValue = !this.currentValue
+      this.handleChange(this.currentValue)
+    },
+    handleChange (val) {
+      this.disabled = true
+      this.$message({
+        message: '正在发送请求',
+        type: 'info'
+      })
+      // 请将 setTimeout 修改为您的异步请求
+      setTimeout(() => {
+        this.disabled = false
+        this.$message({
+          message: '修改成功',
+          type: 'success'
+        })
+        this.$emit('change', val)
+        // 如果修改失败的话需要在这里手动将 currentValue 复原
+      }, 1000)
+    }
+  }
+}
+</script>

From 8d9c1331f51d388fe86c081e0d8407c317395af5 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 7 Aug 2018 09:28:21 +0800
Subject: [PATCH 06/10] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: afaa452d37658c5f62744d79b8512b602777e6e7 [formerly afaa452d37658c5f62744d79b8512b602777e6e7 [formerly afaa452d37658c5f62744d79b8512b602777e6e7 [formerly afaa452d37658c5f62744d79b8512b602777e6e7 [formerly b8ab7a17015b58a9454785b94a496ea1b8ef4946 [formerly 7d06c1ad50bc49569d9ff2071350b6c9f4194828]]]]]
Former-commit-id: 48b8f321c6782ef9f228196af32507c6bfcbf437
Former-commit-id: 2d0d551f108a273b4b8eb89cb402e2e6223db85c
Former-commit-id: 509e61862040344b57bb23a7502dc9e724412b38 [formerly 9683910aa2ca56b16b82385d2de9e1bcd9b95450]
Former-commit-id: 91576efbc04a625ad457efe0738f1c96bc368b49
Former-commit-id: fe399801aa974e6dc008923e93050d256edac5db
Former-commit-id: 63e0756f2d74e21bb62e977f5c2143293656811f
Former-commit-id: 081a8f64bc1346b7b3520bb6ad5db2d503555012
Former-commit-id: cf76e86e9b06bb9ee9513b09772dc63a23ce72d6
---
 src/menu/modules/demo-business.js         |  2 +-
 src/pages/demo/business/table/1/index.vue | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/menu/modules/demo-business.js b/src/menu/modules/demo-business.js
index df067009..78724af8 100644
--- a/src/menu/modules/demo-business.js
+++ b/src/menu/modules/demo-business.js
@@ -8,7 +8,7 @@ export default {
       title: '表格',
       icon: 'table',
       children: [
-        { path: `${pre}table/1`, title: '1' }
+        { path: `${pre}table/1`, title: '表格 1' }
       ]
     }
   ])('/demo/business/')
diff --git a/src/pages/demo/business/table/1/index.vue b/src/pages/demo/business/table/1/index.vue
index 459092a2..0e8ea62a 100644
--- a/src/pages/demo/business/table/1/index.vue
+++ b/src/pages/demo/business/table/1/index.vue
@@ -8,6 +8,8 @@
 
 <script>
 export default {
+  // name 值和本页的 $route.name 一致才可以缓存页面
+  name: 'demo-business-table-1',
   components: {
     'DemoPageHeader': () => import('./componnets/PageHeader'),
     'DemoPageMain': () => import('./componnets/PageMain'),
@@ -20,11 +22,23 @@ export default {
   },
   methods: {
     handleSubmit (form) {
+      this.$message({
+        message: '开始请求表格数据',
+        type: 'info'
+      })
       this.$axios.post('/api/demo/business/table/1', form)
         .then(res => {
+          this.$message({
+            message: '表格数据请求完毕',
+            type: 'success'
+          })
           this.table = res.list
         })
         .catch(err => {
+          this.$message({
+            message: '表格数据请求异常',
+            type: 'error'
+          })
           console.log('err', err)
         })
     }

From 74768384618c3149651865af39d00d70e43b7b97 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 7 Aug 2018 11:00:20 +0800
Subject: [PATCH 07/10] =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: b884c14ff6a7eabd19d6d46c58d138559445b7d0 [formerly b884c14ff6a7eabd19d6d46c58d138559445b7d0 [formerly b884c14ff6a7eabd19d6d46c58d138559445b7d0 [formerly b884c14ff6a7eabd19d6d46c58d138559445b7d0 [formerly feb36665a3ec13b199f716dd21f8c8ce4fc7d22a [formerly 88bb76f34b499eaf2c86f516387254787921df61]]]]]
Former-commit-id: 06ffd5ee37a4a2a3f1d3f491eb44c15fccf23764
Former-commit-id: 6c2deb62bf8846beef4e310e80343ec4e78d47d9
Former-commit-id: 3540e6fde11512973180ea8f46dba43bec8fc9b0 [formerly 87395c73907104e27e8fd089d8bb89ba1b4ffe38]
Former-commit-id: 32ed6256796b02d9e8e96dc1576a5499f68ff9fc
Former-commit-id: bedcff834b6498bdae0151c6d55d64f72418f382
Former-commit-id: ef177bb11a63353e01103476d2b3dd59ac8defae
Former-commit-id: 69db6ad5d36ef97bf244950400ea2ac1b7a54b7d
Former-commit-id: 143c95ccf7aa834319c6a7bab5e4e3c5a357de36
---
 .../{TypeControl => BooleanControl}/index.vue |  0
 .../index.vue                                 |  0
 .../table/1/componnets/PageFooter/index.vue   | 15 ++++++--
 .../table/1/componnets/PageMain/index.vue     | 16 ++++-----
 src/pages/demo/business/table/1/index.vue     | 35 ++++++++++++-------
 5 files changed, 44 insertions(+), 22 deletions(-)
 rename src/pages/demo/business/table/1/componnets/{TypeControl => BooleanControl}/index.vue (100%)
 rename src/pages/demo/business/table/1/componnets/{TypeControlMini => BooleanControlMini}/index.vue (100%)

diff --git a/src/pages/demo/business/table/1/componnets/TypeControl/index.vue b/src/pages/demo/business/table/1/componnets/BooleanControl/index.vue
similarity index 100%
rename from src/pages/demo/business/table/1/componnets/TypeControl/index.vue
rename to src/pages/demo/business/table/1/componnets/BooleanControl/index.vue
diff --git a/src/pages/demo/business/table/1/componnets/TypeControlMini/index.vue b/src/pages/demo/business/table/1/componnets/BooleanControlMini/index.vue
similarity index 100%
rename from src/pages/demo/business/table/1/componnets/TypeControlMini/index.vue
rename to src/pages/demo/business/table/1/componnets/BooleanControlMini/index.vue
diff --git a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
index 9fa48b6e..75e5f573 100644
--- a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
@@ -13,6 +13,17 @@
 
 <script>
 export default {
+  props: {
+    current: {
+      default: 1
+    },
+    size: {
+      default: 100
+    },
+    total: {
+      default: 400
+    }
+  },
   data () {
     return {
       page: {
@@ -24,10 +35,10 @@ export default {
   },
   methods: {
     handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
+      this.$emit('change', this.page)
     },
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
+      this.$emit('change', this.page)
     }
   }
 }
diff --git a/src/pages/demo/business/table/1/componnets/PageMain/index.vue b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
index 9f4aed3d..a522b78f 100644
--- a/src/pages/demo/business/table/1/componnets/PageMain/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -23,7 +23,7 @@
 
     <el-table-column label="状态" width="50" align="center">
       <template slot-scope="scope">
-        <type-control
+        <boolean-control
           :value="scope.row.type"
           @change="(val) => {
             handleSwitchChange(val, scope.$index)
@@ -36,13 +36,13 @@
             name="times-circle"
             style="font-size: 20px; line-height: 32px; color: #F56C6C;"
             slot="inactive"/>
-        </type-control>
+        </boolean-control>
       </template>
     </el-table-column>
 
     <el-table-column label="状态" width="50" align="center">
       <template slot-scope="scope">
-        <type-control-mini
+        <boolean-control-mini
           :value="scope.row.type"
           @change="(val) => {
             handleSwitchChange(val, scope.$index)
@@ -55,7 +55,7 @@
             name="times-circle"
             style="font-size: 20px; line-height: 32px; color: #F56C6C;"
             slot="inactive"/>
-        </type-control-mini>
+        </boolean-control-mini>
       </template>
     </el-table-column>
 
@@ -97,12 +97,12 @@
 </template>
 
 <script>
-import TypeControl from '../TypeControl'
-import TypeControlMini from '../TypeControlMini'
+import BooleanControl from '../BooleanControl'
+import BooleanControlMini from '../BooleanControlMini'
 export default {
   components: {
-    TypeControl,
-    TypeControlMini
+    BooleanControl,
+    BooleanControlMini
   },
   props: {
     tableData: {
diff --git a/src/pages/demo/business/table/1/index.vue b/src/pages/demo/business/table/1/index.vue
index 0e8ea62a..9ffd4118 100644
--- a/src/pages/demo/business/table/1/index.vue
+++ b/src/pages/demo/business/table/1/index.vue
@@ -1,8 +1,13 @@
 <template>
   <d2-container>
-    <demo-page-header slot="header" @submit="handleSubmit"/>
-    <demo-page-main :table-data="table"/>
-    <demo-page-footer slot="footer"/>
+    <demo-page-header
+      slot="header"
+      @submit="handleSubmit"/>
+    <demo-page-main
+      :table-data="table"/>
+    <demo-page-footer
+      slot="footer"
+      @change="handlePaginationChange"/>
   </d2-container>
 </template>
 
@@ -21,23 +26,29 @@ export default {
     }
   },
   methods: {
+    handlePaginationChange (val) {
+      this.$notify({
+        title: '分页变化',
+        message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
+      })
+      this.$nextTick(() => {
+        this.handleSubmit({})
+      })
+    },
     handleSubmit (form) {
-      this.$message({
-        message: '开始请求表格数据',
-        type: 'info'
+      this.$notify({
+        title: '开始请求表格数据'
       })
       this.$axios.post('/api/demo/business/table/1', form)
         .then(res => {
-          this.$message({
-            message: '表格数据请求完毕',
-            type: 'success'
+          this.$notify({
+            title: '表格数据请求完毕'
           })
           this.table = res.list
         })
         .catch(err => {
-          this.$message({
-            message: '表格数据请求异常',
-            type: 'error'
+          this.$notify({
+            title: '表格数据请求异常'
           })
           console.log('err', err)
         })

From cad41fd8af83399d4e1a45e1973ac2081f88d182 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 7 Aug 2018 11:38:25 +0800
Subject: [PATCH 08/10] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E5=AD=98=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 478135c9cddd262cc43ea3c78e3b010140a70965 [formerly 478135c9cddd262cc43ea3c78e3b010140a70965 [formerly 478135c9cddd262cc43ea3c78e3b010140a70965 [formerly 478135c9cddd262cc43ea3c78e3b010140a70965 [formerly 8655f13a475ab0b87d8da714fbd5887fe25b7c19 [formerly c0fd05438c5c159c2e3a9cedcf31814a6ba5e02b]]]]]
Former-commit-id: 7fb997158f60224f32cb323f1f3a853a5fec97cc
Former-commit-id: 80be589dcd2d3fb67ee217844c7590671fdbbd6e
Former-commit-id: 6930aaa344febf1efc9dd96488f5a8e1fdc3c00d [formerly 8109f02fa9ab2bf41a162778fdc48d638b852a6a]
Former-commit-id: e95e8233a308a067c10222e2a277106be773ca63
Former-commit-id: 7ba6a415d53a8f83684608d89a47e35dec98f930
Former-commit-id: 3540b9a82e5ef79b8dfb18753a8a7d2a013aed94
Former-commit-id: 695315892575ac385338befe856980ba21401803
Former-commit-id: 6e91b18c7175df95f5398d7798146f8f74d2b437
---
 src/mock/demo/business/table/1/index.js       |  3 ++
 .../table/1/componnets/PageFooter/index.vue   | 37 +++++++++----------
 .../table/1/componnets/PageHeader/index.vue   | 16 +++++---
 src/pages/demo/business/table/1/index.vue     | 23 ++++++++++--
 4 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/src/mock/demo/business/table/1/index.js b/src/mock/demo/business/table/1/index.js
index 88ad6d55..b5d9a37e 100644
--- a/src/mock/demo/business/table/1/index.js
+++ b/src/mock/demo/business/table/1/index.js
@@ -3,8 +3,11 @@ import Mock from 'mockjs'
 Mock.mock('/api/demo/business/table/1', ({ body }) => {
   // 这是通过 post 传来的参数
   body = JSON.parse(body)
+  const { page } = body
+  page.total = 1000
   return Mock.mock(
     {
+      page,
       'list|30': [{
         'key': '@guid',
         'value|1': [10, 100, 200, 500],
diff --git a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
index 75e5f573..46df4540 100644
--- a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
@@ -1,8 +1,8 @@
 <template>
   <el-pagination
-    :current-page="page.current"
-    :page-size="page.size"
-    :total="page.total"
+    :current-page="current"
+    :page-size="size"
+    :total="total"
     :page-sizes="[100, 200, 300, 400]"
     layout="total, sizes, prev, pager, next, jumper"
     style="margin: -10px;"
@@ -15,30 +15,29 @@
 export default {
   props: {
     current: {
-      default: 1
+      default: 0
     },
     size: {
-      default: 100
+      default: 0
     },
     total: {
-      default: 400
-    }
-  },
-  data () {
-    return {
-      page: {
-        current: 1,
-        size: 100,
-        total: 400
-      }
+      default: 0
     }
   },
   methods: {
-    handleSizeChange(val) {
-      this.$emit('change', this.page)
+    handleSizeChange (val) {
+      this.$emit('change', {
+        current: this.current,
+        size: val,
+        total: this.total
+      })
     },
-    handleCurrentChange(val) {
-      this.$emit('change', this.page)
+    handleCurrentChange (val) {
+      this.$emit('change', {
+        current: val,
+        size: this.size,
+        total: this.total
+      })
     }
   }
 }
diff --git a/src/pages/demo/business/table/1/componnets/PageHeader/index.vue b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
index 66641ef3..4cc94a5c 100644
--- a/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
@@ -44,7 +44,7 @@
     <el-form-item>
       <el-button
         type="primary"
-        @click="submitForm('form')">
+        @click="submitForm">
         <d2-icon name="search"/>
         查询
       </el-button>
@@ -52,7 +52,7 @@
 
     <el-form-item>
       <el-button
-        @click="resetForm('form')">
+        @click="resetForm">
         <d2-icon name="refresh"/>
         重置
       </el-button>
@@ -78,17 +78,21 @@ export default {
     }
   },
   methods: {
-    submitForm (formName) {
-      this.$refs[formName].validate((valid) => {
+    submitForm () {
+      this.$refs.form.validate((valid) => {
         if (valid) {
           this.$emit('submit', this.form)
         } else {
+          this.$notify.error({
+            title: '错误',
+            message: '表单校验失败'
+          })
           return false
         }
       })
     },
-    resetForm (formName) {
-      this.$refs[formName].resetFields()
+    resetForm () {
+      this.$refs.form.resetFields()
     }
   }
 }
diff --git a/src/pages/demo/business/table/1/index.vue b/src/pages/demo/business/table/1/index.vue
index 9ffd4118..0e8b370e 100644
--- a/src/pages/demo/business/table/1/index.vue
+++ b/src/pages/demo/business/table/1/index.vue
@@ -2,11 +2,15 @@
   <d2-container>
     <demo-page-header
       slot="header"
-      @submit="handleSubmit"/>
+      @submit="handleSubmit"
+      ref="header"/>
     <demo-page-main
       :table-data="table"/>
     <demo-page-footer
       slot="footer"
+      :current="page.current"
+      :size="page.size"
+      :total="page.total"
       @change="handlePaginationChange"/>
   </d2-container>
 </template>
@@ -22,7 +26,12 @@ export default {
   },
   data () {
     return {
-      table: []
+      table: [],
+      page: {
+        current: 1,
+        size: 100,
+        total: 0
+      }
     }
   },
   methods: {
@@ -31,20 +40,26 @@ export default {
         title: '分页变化',
         message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
       })
+      this.page = val
       this.$nextTick(() => {
-        this.handleSubmit({})
+        this.$refs.header.submitForm()
       })
     },
     handleSubmit (form) {
       this.$notify({
         title: '开始请求表格数据'
       })
-      this.$axios.post('/api/demo/business/table/1', form)
+      this.$axios.post('/api/demo/business/table/1', {
+        ...form,
+        page: this.page
+      })
         .then(res => {
+          console.log('res', res)
           this.$notify({
             title: '表格数据请求完毕'
           })
           this.table = res.list
+          this.page = res.page
         })
         .catch(err => {
           this.$notify({

From e199d83c79dd35043240b65d0e32d76c4440d779 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 7 Aug 2018 13:46:04 +0800
Subject: [PATCH 09/10] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly fcef20ff04bd08ab432bc47ac75fb4e6483c2851 [formerly fa46aa095a6a2e8317207d6ab9862cc7f4b56339]]]]]
Former-commit-id: 12745f3af51dabcf235c449e6f8b47ea0658b4c2
Former-commit-id: 020118a1c207454660f1e83e35dd834ac9493b74
Former-commit-id: d205e48a791b6afe1222c08943206ee238e92de8 [formerly dc747e67590f1042a5ac7b01ee86d4a9509cd920]
Former-commit-id: 867a148b7da027dc469ef8e1964f593e6abfe86b
Former-commit-id: d348819675978bf97305d79863fd72de108adad3
Former-commit-id: 8c8bcd05152b184547b8903de19a63ef262ed12c
Former-commit-id: 375bf4f1cbce6b86e82e86bedf7951d0d800f97f
Former-commit-id: 4b70e86cd638b19ed13371c86fa4b7be17528ae7
---
 src/mock/demo/business/table/1/index.js       |   2 +-
 .../table/1/componnets/PageHeader/index.vue   |  22 +-
 .../table/1/componnets/PageMain/index.vue     | 254 ++++++++++++------
 src/pages/demo/business/table/1/index.vue     |  17 +-
 src/pages/demo/playground/env/index.vue       |   1 -
 src/pages/error-page-404/page.vue             |   2 +-
 6 files changed, 191 insertions(+), 107 deletions(-)

diff --git a/src/mock/demo/business/table/1/index.js b/src/mock/demo/business/table/1/index.js
index b5d9a37e..7c8d2621 100644
--- a/src/mock/demo/business/table/1/index.js
+++ b/src/mock/demo/business/table/1/index.js
@@ -8,7 +8,7 @@ Mock.mock('/api/demo/business/table/1', ({ body }) => {
   return Mock.mock(
     {
       page,
-      'list|30': [{
+      'list|20': [{
         'key': '@guid',
         'value|1': [10, 100, 200, 500],
         'type': '@boolean',
diff --git a/src/pages/demo/business/table/1/componnets/PageHeader/index.vue b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
index 4cc94a5c..2cd13cac 100644
--- a/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
@@ -6,17 +6,17 @@
     ref="form"
     size="mini"
     style="margin-bottom: -18px;">
-    
+
     <el-form-item label="状态" prop="type">
       <el-select
         v-model="form.type"
         placeholder="状态选择"
         style="width: 100px;">
-        <el-option label="状态 1" value="1"></el-option>
-        <el-option label="状态 2" value="2"></el-option>
-        <el-option label="状态 3" value="3"></el-option>
-        <el-option label="状态 4" value="4"></el-option>
-        <el-option label="状态 5" value="5"></el-option>
+        <el-option label="状态 1" value="1"/>
+        <el-option label="状态 2" value="2"/>
+        <el-option label="状态 3" value="3"/>
+        <el-option label="状态 4" value="4"/>
+        <el-option label="状态 5" value="5"/>
       </el-select>
     </el-form-item>
 
@@ -24,7 +24,7 @@
       <el-input
         v-model="form.user"
         placeholder="用户"
-        style="width: 80px;"/>
+        style="width: 100px;"/>
     </el-form-item>
 
     <el-form-item label="卡密" prop="key">
@@ -44,7 +44,7 @@
     <el-form-item>
       <el-button
         type="primary"
-        @click="submitForm">
+        @click="handleFormSubmit">
         <d2-icon name="search"/>
         查询
       </el-button>
@@ -52,7 +52,7 @@
 
     <el-form-item>
       <el-button
-        @click="resetForm">
+        @click="handleFormReset">
         <d2-icon name="refresh"/>
         重置
       </el-button>
@@ -78,7 +78,7 @@ export default {
     }
   },
   methods: {
-    submitForm () {
+    handleFormSubmit () {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.$emit('submit', this.form)
@@ -91,7 +91,7 @@ export default {
         }
       })
     },
-    resetForm () {
+    handleFormReset () {
       this.$refs.form.resetFields()
     }
   }
diff --git a/src/pages/demo/business/table/1/componnets/PageMain/index.vue b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
index a522b78f..922db145 100644
--- a/src/pages/demo/business/table/1/componnets/PageMain/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -1,99 +1,149 @@
 <template>
-  <el-table
-    :data="currentTableData"
-    size="mini"
-    stripe
-    style="width: 100%">
+  <div>
+    <el-form
+      :inline="true"
+      size="mini">
+      <el-form-item :label="`已选数据下载 [ ${currentTableData.length} ]`">
+        <el-button-group>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="currentTableData.length === 0"
+            @click="handleDownloadXlsx(currentTableData)">
+            xlsx
+          </el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="currentTableData.length === 0"
+            @click="handleDownloadCsv(currentTableData)">
+            csv
+          </el-button>
+        </el-button-group>
+      </el-form-item>
+      <el-form-item :label="`已选数据下载 [ ${multipleSelection.length} ]`">
+        <el-button-group>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="multipleSelection.length === 0"
+            @click="handleDownloadXlsx(multipleSelection)">
+            xlsx
+          </el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="multipleSelection.length === 0"
+            @click="handleDownloadCsv(multipleSelection)">
+            csv
+          </el-button>
+        </el-button-group>
+      </el-form-item>
+    </el-form>
 
-    <el-table-column label="卡密" :show-overflow-tooltip="true">
-      <template slot-scope="scope">
-        {{scope.row.key}}
-      </template>
-    </el-table-column>
+    <el-table
+      :data="currentTableData"
+      v-loading="loading"
+      size="mini"
+      stripe
+      style="width: 100%;"
+      @selection-change="handleSelectionChange">
 
-    <el-table-column label="面值" width="60" align="center">
-      <template slot-scope="scope">
-        <el-tag
-          size="mini"
-          type="success">
-          {{scope.row.value}}
-        </el-tag>
-      </template>
-    </el-table-column>
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
 
-    <el-table-column label="状态" width="50" align="center">
-      <template slot-scope="scope">
-        <boolean-control
-          :value="scope.row.type"
-          @change="(val) => {
-            handleSwitchChange(val, scope.$index)
-          }">
-          <d2-icon
-            name="check-circle"
-            style="font-size: 20px; line-height: 32px; color: #67C23A;"
-            slot="active"/>
-          <d2-icon
-            name="times-circle"
-            style="font-size: 20px; line-height: 32px; color: #F56C6C;"
-            slot="inactive"/>
-        </boolean-control>
-      </template>
-    </el-table-column>
+      <el-table-column label="卡密" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.key}}
+        </template>
+      </el-table-column>
 
-    <el-table-column label="状态" width="50" align="center">
-      <template slot-scope="scope">
-        <boolean-control-mini
-          :value="scope.row.type"
-          @change="(val) => {
-            handleSwitchChange(val, scope.$index)
-          }">
-          <d2-icon
-            name="check-circle"
-            style="font-size: 20px; line-height: 32px; color: #67C23A;"
-            slot="active"/>
-          <d2-icon
-            name="times-circle"
-            style="font-size: 20px; line-height: 32px; color: #F56C6C;"
-            slot="inactive"/>
-        </boolean-control-mini>
-      </template>
-    </el-table-column>
+      <el-table-column label="面值" width="60" align="center">
+        <template slot-scope="scope">
+          <el-tag
+            size="mini"
+            type="success">
+            {{scope.row.value}}
+          </el-tag>
+        </template>
+      </el-table-column>
 
-    <el-table-column label="管理员" width="60">
-      <template slot-scope="scope">
-        {{scope.row.admin}}
-      </template>
-    </el-table-column>
+      <el-table-column label="状态" width="50" align="center">
+        <template slot-scope="scope">
+          <boolean-control
+            :value="scope.row.type"
+            @change="(val) => {
+              handleSwitchChange(val, scope.$index)
+            }">
+            <d2-icon
+              name="check-circle"
+              style="font-size: 20px; line-height: 32px; color: #67C23A;"
+              slot="active"/>
+            <d2-icon
+              name="times-circle"
+              style="font-size: 20px; line-height: 32px; color: #F56C6C;"
+              slot="inactive"/>
+          </boolean-control>
+        </template>
+      </el-table-column>
 
-    <el-table-column label="管理员备注" :show-overflow-tooltip="true">
-      <template slot-scope="scope">
-        {{scope.row.adminNote}}
-      </template>
-    </el-table-column>
+      <el-table-column label="状态" width="50" align="center">
+        <template slot-scope="scope">
+          <boolean-control-mini
+            :value="scope.row.type"
+            @change="(val) => {
+              handleSwitchChange(val, scope.$index)
+            }">
+            <d2-icon
+              name="check-circle"
+              style="font-size: 20px; line-height: 32px; color: #67C23A;"
+              slot="active"/>
+            <d2-icon
+              name="times-circle"
+              style="font-size: 20px; line-height: 32px; color: #F56C6C;"
+              slot="inactive"/>
+          </boolean-control-mini>
+        </template>
+      </el-table-column>
 
-    <el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
-      <template slot-scope="scope">
-        {{scope.row.dateTimeCreat}}
-      </template>
-    </el-table-column>
+      <el-table-column label="管理员" width="60">
+        <template slot-scope="scope">
+          {{scope.row.admin}}
+        </template>
+      </el-table-column>
 
-    <el-table-column label="使用状态" width="100" align="center">
-      <template slot-scope="scope">
-        <el-tag
-          size="mini"
-          :type="scope.row.used ? 'info' : ''">
-          {{scope.row.used ? '已使用' : '未使用'}}
-        </el-tag>
-      </template>
-    </el-table-column>
+      <el-table-column label="管理员备注" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.adminNote}}
+        </template>
+      </el-table-column>
 
-    <el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
-      <template slot-scope="scope">
-        {{scope.row.dateTimeUse}}
-      </template>
-    </el-table-column>
+      <el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.dateTimeCreat}}
+        </template>
+      </el-table-column>
 
-  </el-table>
+      <el-table-column label="使用状态" width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag
+            size="mini"
+            :type="scope.row.used ? 'info' : ''">
+            {{scope.row.used ? '已使用' : '未使用'}}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.dateTimeUse}}
+        </template>
+      </el-table-column>
+
+    </el-table>
+  </div>
 </template>
 
 <script>
@@ -107,11 +157,15 @@ export default {
   props: {
     tableData: {
       default: () => []
+    },
+    loading: {
+      default: false
     }
   },
   data () {
     return {
-      currentTableData: []
+      currentTableData: [],
+      multipleSelection: []
     }
   },
   watch: {
@@ -130,8 +184,34 @@ export default {
         type: val
       })
       // 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
+    },
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+    },
+    handleDownloadXlsx (data) {
+      const columns = [
+        { label: '卡密', prop: 'key' }
+      ]
+      this.$export.excel({
+        columns,
+        data
+      })
+        .then(() => {
+          this.$message('导出表格成功')
+        })
+    },
+    handleDownloadCsv (data) {
+      const columns = [
+        { label: '卡密', prop: 'key' }
+      ]
+      this.$export.csv({
+        columns,
+        data
+      })
+        .then(() => {
+          this.$message('导出CSV成功')
+        })
     }
   }
 }
 </script>
-
diff --git a/src/pages/demo/business/table/1/index.vue b/src/pages/demo/business/table/1/index.vue
index 0e8b370e..0bd5cd09 100644
--- a/src/pages/demo/business/table/1/index.vue
+++ b/src/pages/demo/business/table/1/index.vue
@@ -5,7 +5,8 @@
       @submit="handleSubmit"
       ref="header"/>
     <demo-page-main
-      :table-data="table"/>
+      :table-data="table"
+      :loading="loading"/>
     <demo-page-footer
       slot="footer"
       :current="page.current"
@@ -27,6 +28,7 @@ export default {
   data () {
     return {
       table: [],
+      loading: false,
       page: {
         current: 1,
         size: 100,
@@ -41,29 +43,32 @@ export default {
         message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
       })
       this.page = val
+      // nextTick 只是为了优化示例中 notify 的显示
       this.$nextTick(() => {
-        this.$refs.header.submitForm()
+        this.$refs.header.handleFormSubmit()
       })
     },
     handleSubmit (form) {
+      this.loading = true
       this.$notify({
-        title: '开始请求表格数据'
+        title: '开始请求模拟表格数据'
       })
       this.$axios.post('/api/demo/business/table/1', {
         ...form,
         page: this.page
       })
         .then(res => {
-          console.log('res', res)
+          this.loading = false
           this.$notify({
-            title: '表格数据请求完毕'
+            title: '模拟表格数据请求完毕'
           })
           this.table = res.list
           this.page = res.page
         })
         .catch(err => {
+          this.loading = false
           this.$notify({
-            title: '表格数据请求异常'
+            title: '模拟表格数据请求异常'
           })
           console.log('err', err)
         })
diff --git a/src/pages/demo/playground/env/index.vue b/src/pages/demo/playground/env/index.vue
index 8ed20ace..1da4ba51 100644
--- a/src/pages/demo/playground/env/index.vue
+++ b/src/pages/demo/playground/env/index.vue
@@ -18,4 +18,3 @@ export default {
   }
 }
 </script>
-
diff --git a/src/pages/error-page-404/page.vue b/src/pages/error-page-404/page.vue
index d8f1215e..a1c7843a 100644
--- a/src/pages/error-page-404/page.vue
+++ b/src/pages/error-page-404/page.vue
@@ -10,7 +10,7 @@
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
 .page-404 {
-  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
+  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
   background-blend-mode: multiply,multiply;
   height: 100%;
   display: flex;

From 787dc28752a5631ee06588df6fb26591d278efc2 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 7 Aug 2018 13:59:42 +0800
Subject: [PATCH 10/10] =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: fecd36e23769415d3e36d3f8cc032d987aea2d8a [formerly fecd36e23769415d3e36d3f8cc032d987aea2d8a [formerly fecd36e23769415d3e36d3f8cc032d987aea2d8a [formerly fecd36e23769415d3e36d3f8cc032d987aea2d8a [formerly 759d40ac36de68510e861e2d0ecce3482a70fd24 [formerly b3dec19cec2be3c8c57fba0c5ac597daacda1d76]]]]]
Former-commit-id: 47d1371298c5eba1bd2b0529fea8f31bd7b0d8f4
Former-commit-id: 24887a2265f94dcd186c597beee9df65360f8d9f
Former-commit-id: 8d2355929d7ea131309f9984f86e93208442b831 [formerly 04c2e63aa138e17f58f1a5d68788e621aef61bf6]
Former-commit-id: dab965a72e93b7b7695d06ba2ce670418e0f1625
Former-commit-id: c13e304c52d597527ae9780760ab5835733ea9c5
Former-commit-id: bf2f63acd0a9e6a7b950d18752fc5db2f7bd7244
Former-commit-id: 4578fed754987fc9a30be468683294c1903845bf
Former-commit-id: 0ce3bb9c6052a318d801b24c7744a488f0f3c5d6
---
 .../table/1/componnets/PageMain/index.vue     | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/pages/demo/business/table/1/componnets/PageMain/index.vue b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
index 922db145..d4bbd40e 100644
--- a/src/pages/demo/business/table/1/componnets/PageMain/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -165,7 +165,17 @@ export default {
   data () {
     return {
       currentTableData: [],
-      multipleSelection: []
+      multipleSelection: [],
+      downloadColumns: [
+        { label: '卡密', prop: 'key' },
+        { label: '面值', prop: 'value' },
+        { label: '状态', prop: 'type' },
+        { label: '管理员', prop: 'admin' },
+        { label: '管理员备注', prop: 'adminNote' },
+        { label: '创建时间', prop: 'dateTimeCreat' },
+        { label: '使用状态', prop: 'used' },
+        { label: '使用时间', prop: 'dateTimeUse' }
+      ]
     }
   },
   watch: {
@@ -188,25 +198,28 @@ export default {
     handleSelectionChange (val) {
       this.multipleSelection = val
     },
+    downloadDataTranslate (data) {
+      return data.map(row => ({
+        ...row,
+        type: row.type ? '禁用' : '正常',
+        used: row.used ? '已使用' : '未使用'
+      }))
+    },
     handleDownloadXlsx (data) {
-      const columns = [
-        { label: '卡密', prop: 'key' }
-      ]
       this.$export.excel({
-        columns,
-        data
+        title: 'D2Admin 表格示例',
+        columns: this.downloadColumns,
+        data: this.downloadDataTranslate(data)
       })
         .then(() => {
           this.$message('导出表格成功')
         })
     },
     handleDownloadCsv (data) {
-      const columns = [
-        { label: '卡密', prop: 'key' }
-      ]
       this.$export.csv({
-        columns,
-        data
+        title: 'D2Admin 表格示例',
+        columns: this.downloadColumns,
+        data: this.downloadDataTranslate(data)
       })
         .then(() => {
           this.$message('导出CSV成功')