页面1.0自定义JS帮助文档

// params 为内置变量，业务中的参数及方法都会挂载到上面
export default (params) => {
  const { 
    // -----内置对象------
    dashboard, // 仪表盘元素 基础信息
    globalInfo: {
    	appId, // 当前仪表盘所属应用ID
      space, // 当前仪表盘所属空间
      userInfo, // 当前系统登录用户信息
    }, 
    
    // -----内置方法------
    areaMapAction,
    getAreaInfoByCode, // getAreaInfoByCode('key')通过区域编码，获取该区域信息
    setAreaInfo, // setAreaInfo({...})编辑 仪表盘内任意区域信息
    
    // -----内置请求------
    root, // React Router
    rootRequest, // 系统根请求
    
    // -----内置第三方组件------
    eCharts, // 为自定义JS提供 eCharts图形渲染工具
    React, // 为自定义JS提供 React工具
    ReactDOM, // 为自定义JS提供 ReactDOM工具
    lodash, // 为自定义JS提供 lodash工具
    antd, // 为自定义JS提供 antd工具
    moment, // 为自定义JS提供 moment工具
  } = params;

  // 返回对象用于交互（必须）
  return {
    // 内置 入口方法（必须）
    run({
    	 dashboardDom, // 为自定义JS提供 当前仪表盘内容区域的DOM节点
    }) {
      // 当前仪表盘所有区域均加载完毕后触发
    },
    // 内置 前置全局自定义JS方法（需使用前置逻辑时使用）
    preRun(loadData) {
      // 自定义区域联动逻辑
      
      return {...loadData}
    },
    // 内置 区域联动桥梁（自定义区域联动时使用）
    dataLinkage(povs: {
      									pov: string;
      									sheetName?: string;
      									value: string
    									},
                 otherInfo: any) {
      // 自定义区域联动逻辑
      // otherInfo为额外参数，目前清单表传的是清单表行信息（含权限）
    },
    // 用户自定义JS
    aaa() {
      // TODO 自定义业务逻辑
    }
  };
}

// params 为内置变量，业务中的参数及方法都会挂载到上面
export default (params) => {
  const {
    // -----内置对象------
    areaDom, // 当前标准区域的DOM节点（注：浏览器加载/解析自定义时，areaDom可能为undefined，
             // 如需使用建议通过下run函数参数取值）
  	areaInfo, // 当前标准区域的配置信息
    dataSource, // 当前标准区域元素动态请求的数据信息（注：浏览器加载/解析自定义时，
               // dataSource可能为undefined，如需使用建议通过下run函数参数取值）
    globalInfo: {
    	appId, // 当前仪表盘所属应用ID
      space, // 当前仪表盘所属空间
      userInfo, // 当前系统登录用户信息
    }, 
    
    // -----内置方法------
  	setAreaInfo, // 更新当前仪表盘任意区域的配置信息
    reloadArea, // reloadArea()无参数，直接调用后重新加载当前区域；
    getAreaInfoByCode, // 通过标准区域的编码 获取该区域的配置信息
    getDataSource, // 获取最新的元素动态请求的数据信息
    
    // -----内置请求------
    root, // React Router
    rootRequest, // 系统根请求
   
    // -----内置第三方组件------
    eCharts, // 为自定义JS提供 eCharts图形渲染工具
    React, // 为自定义JS提供 React工具
    ReactDOM, // 为自定义JS提供 ReactDOM工具
    lodash, // 为自定义JS提供 lodash工具
    antd, // 为自定义JS提供 antd工具
    jquery, // 为自定义JS提供 jquery工具
    moment, // 为自定义JS提供 moment工具
  } = params;

  export default function customScript(params) {
    // 返回对象用于交互（必须）
    return {
      // 内置 入口方法（必须）
      run({
            areaInfo,  // 当前标准区域的配置信息
            dataSource, // 当前标准区域元素动态请求的数据信息
            areaDom // 当前标准区域的DOM节点
          }) {
        // 当前标准区域，在正常获取区域设置元素的数据后，触发
        ReactDOM.render( <div></div>, areaDom);
      },
      // 内置 区域大小变化方法（可选）
      resize() {
        // 当前标准区域在编辑状态，拖动改变大小后触发
      },

      // 用户自定义JS
      aaa() {
        // TODO 自定义业务逻辑
      }
    };
  }
}

interface IDashboard {
  id?: string;
  // 编码
  name?: string;
  // 描述
  description?: string;
  // 描述（中文）
  description1?: string;
  // 描述（英文）
  description2?: string;
  description3?: string;
  description4?: string;
  description5?: string;
  description6?: string;
  description7?: string;
  description8?: string;
  
  // 区域样式开关
  styleSwitch: boolean;
  // 全局样式
  globalStyle: DashboardBasicStyle;
  // 全局自定义JS
  globalJsCode?: string;
  // 全局自定义JS文件目录
  globalJsFile?: string;
  // 全局自定义js开关
  enableCustomJs?: boolean;
  // 分批加载开关
  loadingFlag?: boolean;
  // 元素存储位置
  parentId?: number;

  orderList: string[][];

  [key: string]: any;
}

interface DashboardBasicStyle {
  // 图标
  icon?: string;
  // 图标颜色
  iconColor?: string;
  // 是否隐藏标题
  hideHeaderTitle?: boolean;
  // 是否隐藏头部
  hideHeader?: boolean;
  // 整体样式
  globalCardCss?: string;
  // 标题栏样式
  globalCardHeaderCss?: string;
  // 正文栏样式
  globalCardBodyCss?: string;
}

// areaInfo通过getAreaInfoByCode('key')返回
// 入参：区域基本信息
// 出参：区域基本信息（更新后）
setAreaInfo: (areaInfo: IStandardArea | IPOVArea) => IStandardArea | IPOVArea

// 入参：区域编码
// 出参：区域基本信息
getAreaInfoByCode: (areaCode: string): IStandardArea | IPOVArea

enum AreaTypes {
  /**
   * 标准区域
   */
  Standard = 'STANDARD',
  /**
   * Pov区域
   */
  Pov = 'POV',
}

interface IStandardArea {
  // 后端生成的唯一id，有数据则已落库
  id?: string;
  // 编码
  name: string;
  // 描述
  description?: string;
  // 描述（中文）
  description1?: string;
  // 描述（英文）
  description2?: string;
  description3?: string;
  description4?: string;
  description5?: string;
  description6?: string;
  description7?: string;
  description8?: string;
  // 区域类型
  type: AreaTypes;
  // 组件类型
  componentType?: StandardAreaTypes;
  // 元素类型
  elementType?: ElementTypeEnum;
  // 元素名称
  elementName?: string;
  // 元素id，后端查询elementName后传给前端，保存时不提交
  otherElementId?: string;
  // 数据源类型
  sourceDataType?: StandardAreaSourceTypes;
  // 数据源名称
  sourceDataName?: string;
  // 额外得参数
  sourceDataNameExtra?: string;
  // 切换pov自动刷新
  refresh: boolean;
  // 局部js
  localJsCode: string;
  // 局部js路径
  localJsFile: string;
  // 局部样式
  localStyle: DashboardBasicStyle;
  // 区域加载次序
  loadingOrder: number;
  // 区域样式开关
  styleSwitch: boolean;
  // 筛选条件
  link: IFilterCondition[];
  // 关联的区域（仅前端用）
  relationAreas: string[];
  // 选择电子表格后，选择的sheetName（仅前端用）
  sheetName?: string | string[];
  // 区域最终请求的元素数据
  dataSource?: any;

  // Pov字段变更联动标识（随机字符串），变动后标准区域需调用数据更新方法
  refreshDataByPovFlag: string;
  // 区域渲染状态
  renderStatus: AreaRenderStatus;
  // 区域是否渲染完成
  renderFinished: boolean;

  //  元素属性更改过(前端使用)
  hasChanged: boolean;
  //  标题属性修改过(前端使用)
  titleChange: boolean;

  // 电子表格对象，只在其他模块-电子表格中使用(前端使用)
  spread?: GC.Spread.Sheets.Workbook;
  // 电子表格pov form，只在其他模块-电子表格中使用(前端使用)
  povForm?: FormInstance;
  // 获取自定义JS内写的方法(前端使用)
  getCustomScript?: () => any;
}

interface IPOVArea {
  id?: string;
  name: string;
  // 描述
  description?: string;
  // 描述（中文）
  description1?: string;
  // 描述（英文）
  description2?: string;
  description3?: string;
  description4?: string;
  description5?: string;
  description6?: string;
  description7?: string;
  description8?: string;
  // 区域类型
  type: AreaTypes;
  // 切换pov自动刷新
  refresh: boolean;
  // 局部js
  localJsCode: string;
  // 局部js路径
  localJsFile: string;
  // 局部样式
  localStyle: DashboardBasicStyle;
  // 区域样式开关
  styleSwitch: boolean;
  // POV字段
  pov: IPOVFiled[];
}

interface IPOVFiled {
  name: string;
  // 描述
  description?: string;
  // 描述（中文）
  description1?: string;
  // 描述（英文）
  description2?: string;
  description3?: string;
  description4?: string;
  description5?: string;
  description6?: string;
  description7?: string;
  description8?: string;
  valueType: ValueTypeEnum;
  valueTypeMap: ValueTypeItem;
  povOrigin: string;
  povSort: number;
  // 所属区域key（仅前端用）
  areaKey: string;
  // 关联的区域（仅前端用）
  relationAreas: string[];
  // 当前pov选择的数据
  currentValue?: any;
  // 当前pov字段筛选条件配置是否正确
  validate?: boolean;
  // pov字段在区域内的key，不会随排序变动（仅前端用）
  povKey?: string;
}

/**
 * 值类型枚举
 */
enum ValueTypeEnum {
  // 文本
  Text = 1,
  // 值列表
  SmartList = 3,
  // 文本域
  TextArea = 6,
  // 维度
  Dimension = 8,
  // 日期
  Date = 11,
  // 用户
  User = 12,
  // 自定义列表
  CustomList = 13,
  // 文件上传
  FileUpload = 14,
  // 数字
  Number = 15,
}

/**
 * ValueType 定义所需字段
 */
export interface ValueTypeItem {
  // 字段性质
  valueType: ValueTypeEnum;
  // 对应字段的键值
  valueKey: string;

  // 维度名
  dimensionName: string;
  // 值显示
  dimensionDisplay: number;

  // 文本长度
  length?: number;
  // 总长最大长度
  maxLen?: number;

  // 小数最大长度
  digitLen?: number;
  // 是否百分比
  percentage?: boolean;
  // 显示时小数部分最大长度
  displayDigitLen?: number;
  // 最大值
  maximum?: number;
  // 最小值
  minimum?: number;
  // 允许等于最大值
  maxEqual?: boolean;
  // 允许等于最小值
  minEqual?: boolean;

  // 显示格式（字段类型为“日期时间”时出现）
  instruction?: string;

  // 默认值
  defaultValue?: string;

  // 是否显示千分位
  thousandthSymbol?: boolean;
  // 功能编码（字段类型为“维度”时出现）
  functionCode?: string;
  // 可以选择维度父级节点（字段类型为“维度”时出现）
  dimParentNodeSelectable?: boolean;
  // 是否树形结构展示
  treeView?: boolean;
  // 多层级显示
  multiLevel?: string;
  // 当前多层级
  currentLevel?: string;
  // 值列表成员（字段类型为“值列表”时出现）
  valueField?: string[];
  // 值列表显示方式
  smartListDisplay?: number;
  // 列表有效值（字段类型为“自定义列表”时出现），用分号分隔
  list?: string | null;
  // 允许多选
  selectedMulti?: boolean;
  // 允许多选的条数
  multipleChoiceLimit?: number;

  [key: string]: any;
}

function dataLinkage(povs: {
                              // 元素Pov key
                              pov: string;
                              // POV所在sheet的名称
                              sheetName?: string;
                              // POV值
                              value: string;
                            }[],
                            // 其他信息
                            otherInfo: any) {
   // 自定义区域联动:
   // 元素类型区域：清单表
   //        povs会传递整行对应的pov信息，otherInfo会传整行数据信息
   // 元素类型区域：电子表格
   //        开发中...
  
   // 自定义区域：
   //        可通过自定义JS中params.globalCustomScript.call('dataLinkage', xx, xx)，
   //        按需调用传递相关pov信息(2021-9-8日发布)
}

----------------------------以下为使用 dataLinkage Demo---------------------------
--------------------（获取元素类型的电子表格或清单表的单元格点击数据）-------------------
export default (params) => {
  const { getAreaInfoByCode, setAreaInfo } = params;
  return {
    run() {
      console.log('dashboard run')
    },
    dataLinkage(povs, otherInfo) {
      console.log('dashboard dataLinkage: ', povs, otherInfo)
      
      // 自定义区域联动时，直接调用自定义区域的自定义JS相关的方法。
      // 注：自定义区域中dataLinkage非内置方法，可自行定义
      const customArea = getAreaInfoByCode('STANDARD_f368ed091');
      customArea.getCustomScript().call('dataLinkage', povs);
      
      // 标准区域联动时，只能通过POV设置值
      console.log('标准区域：', getAreaInfoByCode('STANDARD_f282d1f11'))
      const povArea = getAreaInfoByCode('POV_4d683b991');
      setAreaInfo({
        ...povArea,
        pov: povArea.pov.map(item => {
          const hitPov = povs.find(p => p.pov === item.name)
          return {
                ...item,
                currentValue: hitPov?.value || item.currentValue,
                valueTypeMap: {
                  ...item.valueTypeMap,
                  defaultValue: hitPov?.value || item.valueTypeMap.defaultValue,
                }
              }
        }),
        // 设置POV值后，触发刷新
        refreshFlag: Date.now().toString()
      })
    }
  }
}