ith-form-cache组件介绍

说明

ith-form-cache 数据表单缓存组件,可用于表单输入过程中缓存表单数据.在某些非主观情况下关闭了表单或浏览器导致数据丢失,需要重新输入的体验
缓存的key为 ith-form-cache_ + 当前路由全路径 + 登录用户name 登录用户name为后台拼接

使用注意

• 需要在项目中设置token处set一下token
• 有缓存数据但未回显情况时,检查mode所绑定的对象属性是否申明存在
• 注意看使用示例注释

安装

// 安装
npm install ith-form-cache
yarn add ith-form-cache

main.js

import IthFormCache from 'ith-form-cache'
Vue.use(IthFormCache)

src/utils/auth.js

import IthFormCache from 'ith-form-cache'

// 在这里设置一下IthFormCache token
export function setToken(token) {
  IthUI.config.setToken(token)
  IthFormCache.config.setToken(token)
  return Vue.ls.set(TokenKey, token, 48 * 60 * 60 * 1000)
}

使用示例一 新增表单

<template>
  <div>
    <!-- 这里不想显示提示语 -->
    <th-form-cache ref="refCache" :mode="formData" hidden />
    
    <el-form :mode="formData">
      <el-form-item label="a1">
        <el-input v-model="formData.a1" />
      </el-form-item>
      <el-form-item label="a2">
        <el-input-number v-model="formData.a2" />
      </el-form-item>
      <el-form-item label="a3">
        <el-date-picker v-model="formData.a3" />
      </el-form-item>
      <el-form-item label="a4">
        <el-select v-model="formData.a4" placeholder="请选择">
          <el-option label="label1" value="value1" />
          <el-option label="label2" value="value2" />
          <el-option label="label3" value="value3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="clickSave">保存</el-button>
        <el-button @click="clickClear">清空缓存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        a1: '',
        a2: '',
        a3: '',
        a4: ''
      }
    }
  },
  methods: {
    clickSave () {
      // 保存成功后调用clear函数清除缓存
      this.$http.post('').then(res => {
        this.$refs.refCache.clear()
      })
    },
    clickClear() {
      this.$refs.refCache.clear()
    }
  }
}
</script>

使用示例二 编辑表单

<template>
  <div>
    <!-- 这里不想显示提示语 -->
    <th-form-cache 
        ref="refCache"
        :mode="formData"
        @init="cacheInit"
        @original="originalHandle"
    />
    
    <el-form :mode="formData">
      <el-form-item label="a1">
        <el-input v-model="formData.a1" />
      </el-form-item>
      <el-form-item label="a2">
        <el-input-number v-model="formData.a2" />
      </el-form-item>
      <el-form-item label="a3">
        <el-date-picker v-model="formData.a3" />
      </el-form-item>
      <el-form-item label="a4">
        <el-select v-model="formData.a4" placeholder="请选择">
          <el-option label="label1" value="value1" />
          <el-option label="label2" value="value2" />
          <el-option label="label3" value="value3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="clickSave">保存</el-button>
        <el-button @click="clickClear">清空缓存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        a1: '',
        a2: '',
        a3: '',
        a4: ''
      }
    }
  },
  methods: {
    // 初始化获取云缓存数据
    cacheInit (val) {
      console.log(val)
      // 一进入编辑页可不直接查详情,待无缓存在查询
      // 如果val为null 说明云端无数据,需要调用详情接口查询
      if(!val) {
        this.getDetailFn()
      }
    },
    // 点击显示原数据按钮回调
    originalHandle () {
      console.log('查询获取正常详情数据')
      this.getDetailFn()
    },
    // 获取详情数据接口函数
    getDetailFn () {
      this.formData = {
        a1: '数据数据',
        a2: 100,
        a3: '2020-02-02 12:12:12',
        a4: 'value1'
      }
    },
    clickSave () {
      // 保存成功后调用clear函数清除缓存
      this.$http.post('').then(res => {
        this.$refs.refCache.clear()
      })
    },
    clickClear() {
      this.$refs.refCache.clear()
    }
  }
}
</script>

Attributes

参数	说明	类型	默认值	可选值
mode	绑定的form表单数据对象	Object	--	--
disabled	禁用缓存,在编辑新增复用组件情况下使用较多	Boolean	false	--
hidden	是否隐藏提示	Boolean	false	--
showOriginal	是否显示原数据按钮	Boolean	false	--
showClear	是否显示清除云缓存按钮	Boolean	false	--
formKey	自定义缓存key,会拼接在初始key后	String	--	--
以下为el-alert组件的属性	--	--	--	--
title	标题	String	--	--
type	主题	String	info	success/warning/info/error
description	辅助性文字也可通过默认 slot 传入	String	--	--
closable	是否可关闭	boolean	true	--
center	文字是否居中	boolean	true	--
close-text	关闭按钮自定义文本	String	--	--
show-icon	是否显示图标	boolean	false	--
effect	选择提供的主题	String	light	light/dark

Methods

方法名	说明	参数
clear	清除缓存	--

Events

事件名称	说明	回调参数
init	获取云端数据初始化后触发	返回的数据为云端数据,无数据为null
original	点击显示原数据按钮事件	--