页面2.0自定义JS帮助文档

import React from '/package-base/react.mjs';
// import { getAppSpace } from '@deepfos/help/es/app/appInfo';
// import useAppEasyInfo from '@deepfos/store/es/app/useAppEasyInfo';
import { notification } from '/package-base/antd4.mjs';

class Demo extends React.PureComponent {
  constructor(props) {
    super(props);
  }


  componentWillMount() { // 预装载函数
    console.log(8888)
  }

  componentDidMount() { // 组件装载之后调用，此时可以获取到DOM节点并操作
    const {
      getFieldValueByComponentId,
      addEventByComponentId,
      getComponentInfoByComponentId,
      setPropsByComponentId,
      setPropsByCode,
      getPropsByComponentId,
      setFieldValueByCode,
      getAreaChildrenListByComponentId,
      getInteractivesInfo,
      setInteractivesInfo
    } = this.props;






    const runSomeGetFn = () => {
      // 通过componentId获取
      console.log(getAreaChildrenListByComponentId('Card_1655705477914_175'))
      console.log(getComponentInfoByComponentId('Text_1655377280005_300'));
      console.log(getPropsByComponentId('Text_1655377494282_134', 'textContent'))



      // 通过code获取
      // console.log(getComponentInfoByCode('Text_61da207e3'));
      // console.log(getPropsByCode('Text_c2fe44947', 'textContent'))
      // console.log(getPropsByCode('Image_22f8f4613', 'url'))
    }

    const runGetDomFn = () => {
      const componentId = 'Text_1655377280005_300'; // dashboard 最外层dom节点、每个区域的dom信息   
      console.log(document.querySelector(`div[data-id=${componentId}]`))
    }


    const runSetSomeFn = () => {
      // 更改文本和维度筛选器参数
      setPropsByComponentId([
        {
          componentId: 'Text_1655377280005_300',
          properties: {
            textContent: `你你你你自定义js设置的内容`,
          },
        },
        {
          componentId: 'FilterDimension_1655957559031_228',
          properties: {
            dimensionExpression: `valueKey8888`,// 更改维度表达式
            interactives: { // 设置这个筛选器的交互动作
              to_new_page: [{
                "id": "INTERACTIVE_1655958616597_296",
                "name": "entity调整清单表",
                "triggerComponentId": "FilterDimension_1655957559031_228",
                "triggerAction": "to_new_page",
                "targetComponentId": null,
                "jumpElementDetail": {
                  "elementName": "llllll",
                  "folderId": "DIRb8b0beaf0392",
                  "path": "\\karl\\ListTable\\",
                  "elementType": "LST",
                  "serverName": "list-table-server1-2",
                  "relativePath": null,
                  "absoluteTag": true,
                  "id": "177ba267-dd69-4774-b9fb-c848c996e1a2",
                  "description": {},
                }
              }]
            }
          },
        },
      ]);

      // 修改富文本中表格的数据
      setPropsByCode([
        {
          code: 'ImageText_755266326',
          properties: {
            richTextContent: `<p>图文展示</p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\"><colgroup><col style=\"width: 33.2402%;\"><col style=\"width: 33.2402%;\"><col style=\"width: 33.2402%;\"></colgroup>\n
          <tbody>\n
          <tr onclick="alert(8888)">\n<td>A1</td>\n<td>A2</td>\n<td>A3</td>\n</tr>\n
          <tr>\n<td>1</td>\n<td>内容</td>\n<td>111</td>\n</tr>\n
          <tr>\n<td>2</td>\n<td>22</td>\n<td>222</td>\n</tr>
          \n</tbody>\n</table>`,
          },
        },
      ]);


      setFieldValueByCode('Text_61da207e3', '设置成功了吗888')
      // setFieldValueByComponentId('Text_1655377280005_300', '设置成功了吗')



    }


    const runRefGetChartInfo = () => {
      // 当前图表的所有信息
      // const chart = getComponentInfoByComponentId('RefBIChart_1655803992804_136') // 要获取的图表componentId

      const refElementParams = getPropsByComponentId('RefBIChart_1655803992804_136', 'refElementParams') // 引用元素内部信息
      // chart?.customInfo?.refElementParams?.commonFn?.onSearch({Period:"a4",Year:'as'})
      refElementParams?.refElementInfo?.chartRef?.on('click', (info) => {
        console.log(info)
      })
    }


    const runInteractive = () => {

      // console.log(getInteractivesInfo(), '整个交互动作') // 获取整个dashboard的交互动作
      // setInteractivesInfo([])  // 设置整个dashboard的交互动作

      // 获取某个元素交互动作
      console.log(getPropsByComponentId('RefBIChart_1655708047946_214', 'interactives'));
      // 设置某个元素的交互动作
      setPropsByComponentId([
        {
          componentId: 'FilterDimension_1655957559031_228',
          properties: {
            dimensionExpression: `valueKey8888`,// 更改维度表达式
            interactives: { // 设置这个筛选器的交互动作
              to_new_page: [{
                "id": "INTERACTIVE_1655958616597_296",
                "name": "entity调整清单表",
                "triggerComponentId": "FilterDimension_1655957559031_228",
                "triggerAction": "to_new_page",
                "targetComponentId": null,
                "jumpElementDetail": {
                  "elementName": "llllll",
                  "folderId": "DIRb8b0beaf0392",
                  "path": "\\karl\\ListTable\\",
                  "elementType": "LST",
                  "serverName": "list-table-server1-2",
                  "relativePath": null,
                  "absoluteTag": true,
                  "id": "177ba267-dd69-4774-b9fb-c848c996e1a2",
                  "description": {},
                }
              }]
            }
          },
        },
      ]);


    }
    // 获取控件参数的方法
    // runSomeGetFn()

    // 获取dom的方法
    // runGetDomFn()

    // 设置控件参数
    // runSetSomeFn()

    // 获取引用元素的信息方法
    // runRefGetChartInfo()


    // 交互动作
    runInteractive();


    //警告 todo 触发
    notification.warn({
      message: '测试',
      description: '测试内容',
    });



    // 标签页切换某个tab 获取某个图表的内部方法
    addEventByComponentId('TabCard_1655377485839_132', 'onClick', () => {
      // 方法1
      alert(876);
      // 当前图表的所有信息
      // const chart = getComponentInfoByComponentId('RefBIChart_1655803992804_136') // 要获取的图表componentId

      //  带参刷新---》 调用图表内部的查询方法
      const refElementParams = getPropsByComponentId('RefBIChart_1655708047946_214', 'refElementParams') // 引用信息
      // refElementParams?.commonFn?.onSearch({ Account: "a4888" })
      // 空刷
      refElementParams?.commonFn?.onSearch()
    });





    // 维度筛选器的change操作
    addEventByComponentId('FilterDimension_1655458599421_131', 'onChange', () => {
      alert('onChange');
    });








    // 注释    updateInfo兜底的更新方法
    // updateInfo([
    //   {
    //     id: 'RefBIChart_1655708047946_214',
    //     value: {
    //       ...chart,
    //       customInfo: {
    //         ...chart?.customInfo,
    //         queryDataFlag: Math.random(),
    //         filters: [{
    //           name: 'Account',
    //           value: 'aaa'
    //         }],
    //       },
    //     },
    //   },
    // ]);




  }

  render() {
    return null;
  }
}

export default Demo;

import type {
  ComponentTypes,
  NodePositionEnum,
  TipWithErrorMsg,
  TextStyleEnum,
  enumImageSource,
  enumImageDisplayType,
} from '@/common/types';
import type { SaveDashboardInfo } from '@/service/dashboard';
import type { ICustomJS } from '@/service/upload';
import type { ElementBaseInfo, IElementInfoNode } from '@deepfos-materials/element-select/es/types';
import type { IGetRoleInfo } from '@deepfos-materials/services/es/role';
import type { ValueTypeItem } from '@deepfos-materials/value-type-form-item/es/types';
import type { IInteractive } from '../hooks/useDashboard';
import type { EditComponentInfo } from './EditComponentInfo';
import type { StandardAreaProps } from '@deepfos/pact/es/ElementDashboard/dashboard-2-0-0';

/**
 * 编辑视图组件基础属性
 */
export type EditComponentBaseInfo = {
  componentId: string; // 主键id
  componentType: ComponentTypes; // 组件类型 componentType+widgetType 组成一个类型
  widgetType?: string; // s类型
  cssProps?: string; // css
  level?: number; // level
  parentComponentId: string | null; // 父id
  position: NodePositionEnum;
  sort?: number; // 排序 就安逸
  checkResult?: TipWithErrorMsg; // 字段错误信息
};

/**
 * 编辑视图组件基础显示属性
 */
export type DisplayProps = {
  // 标题图标
  icon?: string;
  // 图标颜色
  iconColor?: string;
  // 按钮颜色
  btnColor?: string;
  // 允许收起
  allowCollapse?: boolean;
  // 默认收起
  defaultCollapse?: boolean;
  // 隐藏标题文字
  hideHeaderTitle?: boolean;
  // 隐藏标题栏
  hideHeader?: boolean;
  // 宽度
  columnWidth?: 6 | 12 | 18 | 24;
  // 显示icon
  showIcon?: boolean;
  // 显示固定列宽
  showColumnWidth?: boolean;
  // 列宽
  fixColumnWidth?: number;
  // 宽度（目前仅图片用）
  width?: string;
  // 高度（目前仅图片用）
  height?: string;
};

/**
 * 所有控件基础customInfo
 *
 * @export
 * @interface IBaseComponent
 */
export interface IBaseComponent {
  code?: string;
  description: Record<string, string>;
}

/**
 * 编辑视图区域类型通用类型
 */
export type IBaseModule = IBaseComponent &
  DisplayProps & {
    enablePartCss?: boolean;
    partCss?: string;
    hidden?: boolean;
    readOnly?: boolean;
    dataTableElementDetail?: ElementBaseInfo;
    isEx?: boolean;
    sortColumnList?: {
      sort: number;
      columnName: string;
      sortDescend: boolean;
    }[];
    selectType?: 1 | 2;
  };

// 字段类型
export interface IBaseField extends IBaseComponent {
  readOnly?: boolean;
  hidden?: boolean;
  defaultValue?: string;
  segName?: string;
  dimensionDisplay?: number;
  dataTableElementDetail?: ElementBaseInfo;
  // 是否启用悬停提示
  enableTitle?: boolean;
  smartListDisplay?: number;
  logicTableColumnInfo: {
    logicInfo: LogicInfo;
    description: Record<string, string>;
    name: string;
  };
  valueKey?: string;
  defaultValueDesc?: string;
  // 元素
  elementDetail?: IElementInfoNode;
  // 角色角色组
  roleScript: IGetRoleInfo;
  // 角色方案
  rsElementDetail: IElementInfoNode;
  // 是否显示树形结构
  treeView: boolean;
  rsMapping: string;
}

/**
 * 按钮类型
 */
export interface IButton extends IBaseComponent, DisplayProps {
  disabled?: boolean;
  title?: Record<string, string>;
  readOnly?: boolean;
  hidden?: boolean;
  jsOnclick: string;
  isEx?: boolean;
  // 是否启用悬停提示
  enableTitle?: boolean;
}

export interface IBaseDivider extends IBaseComponent {
  disabled?: boolean;
  hidden?: boolean;
  titlePosition?: string;
  showTitleText?: boolean;
  showDivider?: boolean;
  isEx?: boolean;
  // 标题文字
  titleText?: string;
}

export interface IGrid extends IBaseComponent {
  // 列比例分配
  columnRatio: string;
  // 列间距
  columnGap: string | undefined;
}

export interface IGridColumn extends IBaseComponent {
  // 列比例
  proportion: number;
}

export interface ITextProp extends IBaseComponent {
  // 文本样式
  textStyle: TextStyleEnum;
  // 文本内容
  textContent: string;
}

export interface IImage extends IBaseComponent, Pick<DisplayProps, 'width' | 'height'> {
  // 来源
  source: enumImageSource;
  // 图片url
  url: string;
  // 显示方式
  displayType: enumImageDisplayType;
  // 宽度单位，留作备用
  widthUnit: 'px';
  // 高度单位，留作备用
  heightUnit: 'px';
}

export interface IIconProp extends IBaseComponent {
  // 图标大小
  fontSize: string;
  // 颜色
  iconColor: string;
  // 图标
  icon: string;
}

export interface IImageTextProp extends IBaseComponent {
  // 富文本编辑器内容
  content: string;
}

export interface IRefElement
  extends IBaseComponent,
    Pick<StandardAreaProps, 'queryDataFlag' | 'filters'> {
  // 关联元素信息
  elementDetail?: ElementBaseInfo;
  // 引用区域高度
  height: number;
}

/**
 * 编辑视图组件扩展属性
 */
// export type EditComponentCustomInfo = Record<string, unknown>;
export type EditComponentCustomInfo =
  | IBaseModule
  | IBaseField
  | IButton
  | IBaseDivider
  | IGrid
  | IGridColumn
  | ITextProp
  | IImage
  | IRefElement;

/**
 * 编辑视图 页面表单部分详情
 */
export type EditFormInfo = {
  description: Record<string, any>; // 描述+多语言
  errorInfo: TipWithErrorMsg & {
    haveLogicTable: boolean; // 是否关联了业务模型
    popupErrorTag: boolean; // 是否有弹窗错误
  }; // 错误信息
  elementName: string; // 页面名称
  path: string; // 路径
  folderId: string; // 文件夹id
  isEx?: boolean;
  jsFile?: string;
  enableCustomJs?: boolean;
  jsCode?: string;
};

export type EditComponentServerInfo = EditComponentBaseInfo & EditComponentCustomInfo;

/**
 * 编辑视图详情
 */
export type EditServerInfo = {
  components: EditComponentServerInfo[]; //
  baseInfo: EditFormInfo;
  customJs?: ICustomJS;
  interactives: IInteractive[] | undefined | null;
  componentCheckResult?: SaveDashboardInfo['componentCheckResult'];
  dashboardCheckResult?: SaveDashboardInfo['dashboardCheckResult'];
  interactionCheckResult?: SaveDashboardInfo['interactionCheckResult'];
};

export type SaveComponentsInfo = Omit<EditComponentInfo, 'componentId'>;

export type BaseError = {
  // tipType为prop有效，用来找哪个属性
  tipKey?: string;
  // clazz为控件本身错误，prop为控件属性错误
  tipType?: string;
  // 展示在控件上或者属性上的简略提示
  tipValue?: string;
  // 展示在表格上的错误编码
  tipCode?: string;
  // 展示在表格上的详细提示
  tipText?: string;
  // 展示在表格上的属性
  tipProp?: string;
};

export interface ErrorWithPath extends BaseError {
  tipKeyPath: (string | number)[];
}

export type EditErrorInfo = {
  errorTag?: boolean;
  errorList?: BaseError[];
  warningList?: BaseError[];
  warningTag?: boolean;
  id?: string; // 主键id
  type?: 'form' | 'interaction';
};

export interface EditErrorWithPathInfo extends EditErrorInfo {
  errorList?: ErrorWithPath[];
  warningList?: ErrorWithPath[];
}

export interface LogicInfo extends Omit<ValueTypeItem, 'valueKey'> {
  valueType: number;
  length: number;
  valueKey: number | string;
}