@shuyun-ep-team/loyalty-lp4-components

企业版忠诚度LP4组件库

Usage no npm install needed!

<script type="module">
  import shuyunEpTeamLoyaltyLp4Components from 'https://cdn.skypack.dev/@shuyun-ep-team/loyalty-lp4-components';
</script>

README

企业版忠诚度LP4组件库

发布

node scripts/publish.js

表达式编辑器

Usage

import ExpressionEditor from '@shuyun-ep-team/loyalty-lp4-components/editor';

const customHints: ICustomHint[] = [
  /**
   * 基础版配置
   */
  {
    text: '自定义模板',
    value: `1 + 1 > 2`
  },
  /**
   * 可自定义命中逻辑的配置
   */
  {
    text: 'custom template',
    value: '{{C}} {{A}} {{B}} {{D}}',
    test(input: string) {
      return !!input.trim() && 'custom template'.includes(input);
    }
  },

  /**
   * 可自定义命中逻辑
   * 可自定义显示文本
   */
  {
    text: 'custom template',
    value: '{{C}} {{A}} {{B}} {{D}}',
    test(input: string) {
      return !!input.trim() && 'custom template'.includes(input);
    },
    render($li, input: string) {
      $li.innerHTML = highlight('custom template', input, 'cm-hint-matched-keyword');
    },
  }
  ];

<ExpressionEditor
    fqn={this.fqn}
    value="1 + 2 == 3"
    disabled={false}
    placeholder="忠诚度LP4高级表达式"
    errorMessage="表达式解析错误"
    onChange={this.onEditorValueChange}
    functions={['SUM', 'AVG', 'COUNT']}
    declarations={['Date', 'Time', 'DateTime']}
    customHints={customHints}
    operatorReplacements={[code: '&&', name: '且']}
    customProperties={[
      { id: 1, name: '姓名', dataType: 'String' },
      { id: 2, name: '年龄', dataType: 'Integer', disabled: true },
      { id: 3, name: '生日', dataType: 'DateTime' }
    ]}
    onRef={editor => this.editor = editor}
/>
// 预览模式
import ExpressionPreview from '@shuyun-ep-team/loyalty-lp4-components/editor/preview';

<ExpressionPreview
    fqn={this.fqn}
    value="1 + 2 == 3"
    functions={['SUM', 'AVG', 'COUNT']}
    declarations={['Date', 'Time', 'DateTime']}
    operatorReplacements={[code: '&&', name: '且']}
    customProperties={[
      { id: 1, name: '姓名', dataType: 'String' },
      { id: 2, name: '年龄', dataType: 'Integer', disabled: true },
      { id: 3, name: '生日', dataType: 'DateTime' }
    ]}
/>

表达式类型推导

Usage

import ExpressionInference, { getCustomProperies, getSpecialTokens } from '@shuyun-ep-team/loyalty-lp4-components/ast';

const input = '{3} > DateTime("2019-01-17T06:57:58.390Z")';
const config = {
  functions: ['SUM', 'AVG', 'COUNT'],
  declarations: ['Date', 'Time', 'DateTime'],
  customProperties: [
    { id: 1, name: '姓名', dataType: 'String' },
    { id: 2, name: '年龄', dataType: 'Integer', disabled: true },
    { id: 3, name: '生日', dataType: 'DateTime' }
  ]
};

// 推断表达式返回的数据类型
console.log(ExpressionInference(input, config)); // Boolean

// 获取表达式中被使用的属性(已废弃,不建议使用)
console.log(getCustomProperies(input, config)); // [{ id: 3, name: '生日', dataType: 'DateTime' }


// 获取表达式中用到的特殊属性集合(仅做模式匹配),例如 自定义属性
const {
  customProperties, // 自定义属性
  pointAccounts, // 积分账户
  gradeHierarchies // 等级体系
} = getSpecialTokens(input, config);