临时存档

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,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],

src/pages/demo/business/table/1/componnets/PageFooter/index.vue

@@ -1,8 +1,8 @@
 <template>
   <el-pagination
-    :current-page="page.current"
+    :current-page="current"
-    :page-size="page.size"
+    :page-size="size"
-    :total="page.total"
+    :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
+      default: 0
-    }
-  },
-  data () {
-    return {
-      page: {
-        current: 1,
-        size: 100,
-        total: 400
-      }
     }
   },
   methods: {
-    handleSizeChange(val) {
+    handleSizeChange (val) {
-      this.$emit('change', this.page)
+      this.$emit('change', {
+        current: this.current,
+        size: val,
+        total: this.total
+      })
     },
-    handleCurrentChange(val) {
+    handleCurrentChange (val) {
-      this.$emit('change', this.page)
+      this.$emit('change', {
+        current: val,
+        size: this.size,
+        total: this.total
+      })
     }
   }
 }

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) {
+    submitForm () {
-      this.$refs[formName].validate((valid) => {
+      this.$refs.form.validate((valid) => {
         if (valid) {
           this.$emit('submit', this.form)
         } else {
+          this.$notify.error({
+            title: '错误',
+            message: '表单校验失败'
+          })
           return false
         }
       })
     },
-    resetForm (formName) {
+    resetForm () {
-      this.$refs[formName].resetFields()
+      this.$refs.form.resetFields()
     }
   }
 }

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({