耗时操作加提示 | 二次开发文档

# 耗时操作加提示

比如数据提交、文件上传等操作，通常需要等待完成后再做后续操作，这时需要页面上显示 ‘Loading’ 或 ‘处理中...’ 这样的提示。框架提供了一组通用函数来实现此功能：

  // 打开
  this.$Waiting.start()
  // 默认不带提示文字，可通过给start 函数传参数加文字
  this.$Waiting.start('Loading...')

  // 关闭
  this.$Waiting.stop()

# 内容国际化

有时需要考虑表单输入内容的国际化，例如企业信息维护页面的“企业名称”字段，需在不同语言环境下展示对应语言的名称，故在输入时要支持输入多种语言对应的名称，而后端存储各种语言对应的值：

  {
    "zh_CN": "ABC有限公司",
    "en_US": "ABC limited."
  }

CAF封装的内容国际化组件名为 content-i18n，下面介绍它的用法:

# i18n props

属性	类型	说明	默认值
value	Object	国际化内容，像上面的json表示的对象	无
textOnly	Boolean	模式1、仅显示当前语言对于的内容，不能编辑，也没有编辑框,建议用于table的单元格	false
editable	Boolean	模式2、是否可编辑，不可编辑时在一个readonly的input框里显示内容	false
name	String	用于有多个国际化字段的编辑模式，标明是哪个字段，以便在on-change中处理	无
icon	String	编辑框上显示的小图标	fa-language
@on-change	Function	用于编辑模式下接收编辑后的内容，此函数返回一个对象 {name:'orderType', i18n: {zh_CN:'',en_US:''} }	无

  <template>
    <e-form>
      <form-item>
        <content-i18n
          :value="orderType"
          name="orderType"
          editable
          @on-change="ci8nChange"
        >
        </content-i18n>
      </form-item>
    </e-form>
  </template>

  export default {
    data () {
      return {
        orderType: {
          zh_CN: '订单类型',
          en_US: 'order type'
        }
      }
    },
    methods: {
      ci8nChange (data) {
        if (data.name === 'orderType') {
          this.orderType = data.i18n
        }
      }
    }
  }

# LOV

LOV（List Of Value）是CAF框架定义系统变量的一种方式。前端需通过接口调用拿到LOV数据并在界面上做展示。
CAF对于LOV的使用做了封装，即兼顾性能又能使开发业务尽可能地少些代码。封装的核心是一个名为 lovmgr 的vue注入（mixins），详细实现请参考 src/common/mixins/lovmgr.js。

开发业务时这样使用：

向Vue实例注入'混合(mixins)' lovmgr

  import lovmgr from 'MIXINS/lovmgr'
  export default {
    mixins: [lovmgr]
  }

在Vue实例的data域中声明要用到的所有LOV，注意声明字段必须是 lovs_declare

  export default {
    date () {
      return {
        lovs_declare: [
          {
            'param_key': 'FILEDTYPE',
            'module_name': 'platform'
          }, {
            'param_key': 'OPTYPE',
            'module_name': 'platform'
          }
        ]
      }
    }
  }

有三个方法可用于获取LOV相关的信息

  getLov(module_name, param_key)
  /* 获取参数列表，例如：
  [{
    key: 0,
    value: '='
  }, {
    key: 1,
    value: '!='
  }]
  */

  getLovValue(module_name, param_key, option_key)
  /*
  获取参数列表中的某项的值
  */

  getLovKey(module_name, param_key, option_value)
  /*
  获取参数列表中的某项的值
  */

html标签中使用lov数据

  <e-select>
    <e-option v-for="o of lovs_declare[0].data" :key="o.value">{{o.key}}</e-option>
  </e-select>

← 插件使用