修改save

src/components/Pagination/index.vue

@@ -59,6 +59,7 @@ export default {
         return this.page
       },
       set (val) {
+        console.log(this)
         this.$emit('update:page', val)
       }
     },

src/components/save-form/index.vue

@@ -2,39 +2,44 @@
   <el-form
     v-bind="{...$attrs, ...$props}"
     v-on="$listeners"
+    ref="form"
   >
     <slot/>
   </el-form>
 </template>
 <script>
-import { saveToStorage, getSearchs } from '@/helpers'
+import { saveToStorage, getSearchs, Searchs } from '@/helpers'
 export default {
   name: 'save-form',
   props: ['model'],
+  data() {
+    return {
+      searchs: null
+    }
+  },
   mounted() {
-    const searchs = getSearchs(this.$route.fullPath)
-    for (const key in searchs) {
-      if (searchs.hasOwnProperty(key)) {
-        const item = searchs[key]
+    const searchs = new Searchs(this.$route.fullPath)
+    this.searchs = searchs
+    const active = searchs.get()
+    for (const key in active.form) {
+      if (active.form.hasOwnProperty(key)) {
+        const item = active.form[key]
         this.model[key] = item
       }
     }
-    console.log(this)
-    console.log(getSearchs(this.$route.fullPath))
   },
   methods: {
     validate(FC) {
       this.$refs.form.validate(valid => {
         FC(valid)
         if (valid) {
-          console.log(this.$route, this.model)
-          saveToStorage(this.$route.fullPath, this.model)
+          this.searchs.update(this.model, undefined, 'form')
         }
       })
     },
     resetFields() {
       this.$refs.form.resetFields()
-      saveToStorage(this.$route.fullPath, this.model)
+      this.searchs.update(this.model, undefined, 'form')
     }
   },
 }

src/helpers/index.js

@@ -1,27 +1,61 @@
 /* eslint-disable no-empty */
-export const getStorageByKey = key => {
-  let json = {}
-  try {
-    const val = sessionStorage.getItem(key) || '{}'
-    json = JSON.parse(val)
-  } catch (error) {}
-  return json
-}
+export class Searchs {
+  saveKey = 'searchs'
 
-export const saveToStorage = (key, value = {}) => {
-  const searchs = getStorageByKey('searchs')
-  searchs[key] = value
-  sessionStorage.setItem('searchs', JSON.stringify(searchs))
-}
+  initSearch = {
+    form: {},
+    page: {},
+  }
+
+  searchs = {}
+
+  constructor(key) {
+    this.key = key
+    this.searchs = this.parse()
+  }
+
+  save() {
+    sessionStorage.setItem(this.saveKey, JSON.stringify(this.searchs))
+  }
+
+  parse() {
+    let json = {}
+    try {
+      const val = sessionStorage.getItem(this.saveKey)
+      json = JSON.parse(val) || {}
+    } catch (error) {}
+    return json
+  }
+
+  get(key) {
+    const k = (key || this.key)
+    if (!this.searchs[k]) {
+      this.searchs[k] = {...initSearch}
+    }
+    return this.searchs[k]
+  }
+
+  remove(type) {
+    if (this.searchs && this.searchs[this.key]) {
+      type ? this.searchs[this.key][type] : this.searchs[this.key]
+      this.save()
+    }
+    return this.searchs
+  }
 
-export const getSearchs = key => {
-  const searchs = getStorageByKey('searchs')
-  return key ? (searchs[key] || {}) : searchs
+  update(data, key, type) {
+    const k = (key || this.key)
+    if (type) {
+      this.searchs[k][type] = data
+    } else {
+      this.searchs[k] = data
+    }
+    this.save()
+    return this.searchs
+  }
 }
 
-export const removeSearchByKey = key => {
-  const searchs = getStorageByKey('searchs')
-  delete searchs[key]
-  sessionStorage.setItem('searchs', JSON.stringify(searchs))
-  return searchs
+const initSearch = {
+  form: {},
+  page: {},
 }

src/views/save-form-test/index.vue

@@ -68,9 +68,15 @@
           </el-date-picker>
         </el-form-item>
         <el-button @click="submit">提交</el-button>
+        <el-button @click="reset">重置</el-button>
         <el-button @click="testvisible = true">打开弹窗</el-button>
       </saveform>
     </div>
+    <pagination :total="rules.total"
+                :page.sync="rules.page"
+                :limit.sync="rules.limit"
+                :page-sizes="rules.page_size"
+                @pagination="getList" />
     <el-dialog :visible.sync="testvisible" destroy-on-close>
       <test v-if="testvisible"/>
       <template #footer>
@@ -81,15 +87,24 @@
 </template>
 <script>
 import saveform from '@/components/save-form'
+import pagination from "@/components/Pagination/index";
 import test from './modals/test'
 export default {
   components: {
     saveform,
-    test
+    test,
+    pagination
   },
   data() {
     return {
       testvisible: false,
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
       form: {
         input: '',
         input2: '',
@@ -108,10 +123,16 @@ export default {
 
   },
   methods: {
+    getList() {
+      return new Promise.resolve()
+    },
     submit() {
       this.$refs.form.validate(valid => {
         console.log(valid)
       })
+    },
+    reset() {
+      this.$refs.form.resetFields()
     }
   }
 }