platform/io.sc.engine.rule.frontend/src/views/shared/processors/ConditionRange.ts

import { $t, Tools, MarkupTableUtil } from 'platform-core';
import { Processor } from '../Processor';
import { PlaceHolder } from '@/utils/PlaceHolder';

class ConditionRange extends Processor {
  #editorDialogWidth: number = 800;

  public getToolbarAction(): any {
    return {
      extend: 'add',
      name: 'conditionRange',
      label: $t('io.sc.engine.rule.core.enums.ProcessorType.CONDITION_RANGE'),
      icon: 'bi-card-checklist',
      enableIf: (args: any) => {
        const type = this.context.target.type;
        return type !== 'RULE_RESULT' && type !== 'SINGLE_RULE_RESULT';
      },
      afterClick: (args: any) => {
        args.grid.getEditorForm().setFieldValue('type', 'CONDITION_RANGE');
      },
    };
  }

  public format(row: any): any {
    const objs: any[] = Tools.json2Object(row.conditionRange);
    if (objs && objs.length > 0) {
      let str = '';
      objs.forEach((obj) => {
        str += '<tr>';
        str += '	<td>' + PlaceHolder.replace(obj.condition) + '</td>';
        str += '	<td width="100px"><span>' + ('' + PlaceHolder.replace(obj.value)) + '</span></td>';
        str += '</tr>';
      });
      return MarkupTableUtil.markupTable('', str, Tools.mergeObject({}, Processor.FORMAT_TABLE_STYLE));
    }
    return '';
  }

  public getEditorFields(): any {
    return [
      {
        colSpan: 7,
        name: 'conditionRange',
        label: $t('re.resources.designer.processor.grid.entity.conditionRange'),
        showIf: (args: any) => {
          return 'CONDITION_RANGE' === args.form.getFieldValue('type');
        },
        type: 'w-grid',
        height: 300,
        localMode: true,
        dbClickOperation: 'edit',
        autoFetchData: false,
        denseBody: true,
        dndMode: 'local',
        pageable: false,
        configButton: false,
        toolbarConfigure: { noIcon: false },
        toolbarActions: [
          'add',
          'clone',
          'edit',
          'remove',
          'separator',
          {
            name: 'example',
            label: $t('example'),
            icon: 'bi-balloon',
            click: (args: any) => {
              const sampleData = [
                { condition: '${变量名}<=0', value: '0' },
                { condition: '${变量名}>0 && ${变量名}<=50', value: '50' },
                { condition: '${变量名}>50 && ${变量名}<=80', value: '80' },
                { condition: '${变量名}>80 && ${变量名}<=100', value: '100' },
                { condition: '${变量名}>100', value: '60' },
              ];
              args.grid.setLocalData(sampleData);
            },
          },
        ],
        columns: [
          {
            name: 'condition',
            label: $t('condition'),
            align: 'left',
            sortable: false,
            format: (value: any) => {
              return PlaceHolder.replace(value);
            },
          },
          {
            name: 'value',
            label: $t('value'),
            sortable: false,
            format: (value: any) => {
              return PlaceHolder.replace(value);
            },
          },
        ],
        editor: {
          dialog: {
            width: '600px',
          },
          form: {
            colsNum: 1,
            fields: [
              {
                name: 'condition',
                label: $t('condition'),
                type: 'w-code-mirror',
                lang: 'java',
                rows: 4,
                placeholder: true,
                lineWrap: true,
                lineBreak: false,
                autoCompletion: this.autoCompletionManager.autoCompletion(),
                userDefinedFunctions: this.userDefinedFunctionsManager.userDefinedFunctions(),
              },
              {
                name: 'value',
                label: $t('value'),
                type: 'w-code-mirror',
                lang: 'java',
                rows: 4,
                lineWrap: true,
                lineBreak: false,
                placeholder: true,
                autoCompletion: this.autoCompletionManager.autoCompletion(),
                userDefinedFunctions: this.userDefinedFunctionsManager.userDefinedFunctions(),
              },
            ],
          },
        },
        onBeforeEditorDataSubmit: (args: any) => {},
      },
    ];
  }

  public getViewerFields(): any {
    return [{ name: 'conditionRange', label: $t('re.resources.designer.processor.grid.entity.conditionRange') }];
  }

  public beforeEditorDataSubmit(args: any): void {
    // 将编辑对话框中的具体分段表格组件转换成 json 字符串
    const grid = args.grid.getEditorForm().getFieldComponent('conditionRange');
    const localData: any[] = grid.getRows();
    const ranges: any[] = [];
    localData.forEach((item) => {
      ranges.push({
        condition: item.condition,
        value: item.value,
      });
    });
    args.data.conditionRange = Tools.object2Json(ranges);
  }

  public afterEditorOpen(args: any): void {
    args.grid.getEditorDialog().setWidth(this.#editorDialogWidth);
    // 初始化代码编辑器的自动完成提示管理器
    this.initAutoCompletionManager();
    // 初始化代码编辑器的用户自定义函数管理器
    this.initUserDefinedFunctionsManager();

    //获取条件分段编辑对话框中的编辑表单
    const form = args.grid.getEditorForm();
    //获取编辑表单中的具体分段表格组件
    const grid = args.grid.getEditorForm().getFieldComponent('conditionRange');

    switch (form.getStatus()) {
      case 'add': // 新增时清空表格内容
        grid.setLocalData([]);
        break;
      case 'edit': // 编辑/复制时填充表格内容
      case 'clone':
        const data = Tools.json2Object(args.data.conditionRange);
        grid.setLocalData(data);
        break;
    }
  }
}

export { ConditionRange };