保存表单状态

src/components/save-form/index.vue

@@ -3,24 +3,33 @@
     ref="form"
     :model="model"
     :rules="rules"
-    {{...formProps}}
   >
     <slot/>
   </el-form>
 </template>
 <script>
+import { saveToStorage, getSearchs } from '@/helpers'
 export default {
   name: 'save-form',
   props: ['model', 'rules', 'formProps'],
   mounted() {
-    console.log(this)
+    const searchs = getSearchs(this.$route.fullpath)
+    for (const key in searchs) {
+      if (searchs.hasOwnProperty(key)) {
+        const item = searchs[key];
+        this.model[key] = item
+      }
+    }
+    console.log(this.$refs.form)
+    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)
         }
       })
     },

src/helpers/index.js

@@ -0,0 +1,27 @@
+/* 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 const saveToStorage = (key, value = {}) => {
+  const searchs = getStorageByKey('searchs')
+  searchs[key] = value
+  sessionStorage.setItem('searchs', JSON.stringify(searchs))
+}
+
+export const getSearchs = key => {
+  const searchs = getStorageByKey('searchs')
+  return key ? (searchs[key] || {}) : searchs
+}
+
+export const removeSearchByKey = key => {
+  const searchs = getStorageByKey('searchs')
+  delete searchs[key]
+  sessionStorage.setItem('searchs', JSON.stringify(searchs))
+  return searchs
+}

src/layout/components/TagsView.vue

@@ -29,6 +29,7 @@
 <script>
 import ScrollPane from '@/components/ScrollPane'
 import { generateTitle } from '@/utils/i18n'
+import { removeSearchByKey } from '@/helpers'
 
 export default {
   name: 'TagsView',
@@ -66,7 +67,7 @@ export default {
 
   },
   methods: {
-    // generateTitle by vue-i18n  
+    // generateTitle by vue-i18n
     generateTitle,
     generateRoute () {
       if (this.$route.path && this.$route.path != '/') {
@@ -98,6 +99,7 @@ export default {
       })
     },
     closeSelectedTag (view) {
+      removeSearchByKey(view.fullPath)
       this.$store.dispatch('delVisitedViews', view).then((views) => {
         if (this.isActive(view)) {
           const latestView = views.slice(-1)[0]

src/router/index.js

@@ -74,6 +74,15 @@ export const constantRoutes = [
         noCache: '1',
         title: '侧边栏'
       }
+    }, {
+      name: '提交表单',
+      path: 'save-form',
+      component: () => import('@/views/save-form-test'),
+      hidden: true,
+      meta: {
+        noCache: '1',
+        title: '提交表单'
+      }
     }]
   },
   {

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

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <saveform ref="form" :formProps="{}" :model.sync="form">
+      <el-form-item
+        label="内容"
+        prop="input"
+        :rules="[{required: true}]"
+      >
+        <el-input v-model="form.input" placeholder="请输入内容"/>
+      </el-form-item>
+      <el-form-item
+        label="内容2"
+        prop="input2"
+        :rules="[{required: true}]"
+      >
+        <el-input v-model="form.input2" placeholder="请输入内容2"/>
+      </el-form-item>
+      <el-form-item label="活动区域" prop="region">
+        <el-select v-model="form.region" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="活动时间" required>
+        <el-col :span="11">
+          <el-form-item prop="date1">
+            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col class="line" :span="2">-</el-col>
+        <el-col :span="11">
+          <el-form-item prop="date2">
+            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="即时配送" prop="delivery">
+        <el-switch v-model="form.delivery"></el-switch>
+      </el-form-item>
+      <el-form-item label="活动性质" prop="type">
+        <el-checkbox-group v-model="form.type">
+          <el-checkbox label="美食/餐厅线上活动" value="1" name="type"></el-checkbox>
+          <el-checkbox label="地推活动" value="2" name="type"></el-checkbox>
+          <el-checkbox label="线下主题活动" value="3" name="type"></el-checkbox>
+          <el-checkbox label="单纯品牌曝光" value="4" name="type"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="特殊资源" prop="resource">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="线上品牌商赞助"></el-radio>
+          <el-radio label="线下场地免费"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="活动形式" prop="desc">
+        <el-input type="textarea" v-model="form.desc"></el-input>
+      </el-form-item>
+      <el-form-item label="活动时间范围" prop="times">
+        <el-date-picker
+          v-model="form.times"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-button @click="submit">提交</el-button>
+    </saveform>
+  </div>
+</template>
+<script>
+import saveform from '@/components/save-form'
+export default {
+  components: {
+    saveform
+  },
+  data() {
+    return {
+      form: {
+        input: '',
+        input2: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: '',
+        type: [],
+        resource: '',
+        desc: '',
+        times: []
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    submit() {
+      this.$refs.form.validate(valid => {
+        console.log(valid)
+      })
+    }
+  }
+}
+</script>