# 耗时操作加提示

比如数据提交、文件上传等操作,通常需要等待完成后再做后续操作,这时需要页面上显示 ‘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。

开发业务时这样使用:

  1. 向Vue实例注入'混合(mixins)' lovmgr
  import lovmgr from 'MIXINS/lovmgr'
  export default {
    mixins: [lovmgr]
  }
  1. 在Vue实例的data域中声明要用到的所有LOV,注意声明字段必须是 lovs_declare
  export default {
    date () {
      return {
        lovs_declare: [
          {
            'param_key': 'FILEDTYPE',
            'module_name': 'platform'
          }, {
            'param_key': 'OPTYPE',
            'module_name': 'platform'
          }
        ]
      }
    }
  }
  1. 有三个方法可用于获取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)
  /*
  获取参数列表中的某项的值
  */
  1. html标签中使用lov数据
  <e-select>
    <e-option v-for="o of lovs_declare[0].data" :key="o.value">{{o.key}}</e-option>
  </e-select>