aip-module v1.0.59

审计信息化平台 (Audit Information Platform - AIP) 模型展现端前端组件

API - Module 组件属于（AIP）前端的组成部分，本组件提供模型部分的前端展现。整个组件采用 React 开发

React版本要求 16 暂不支持 17

如何开始

使用 react-create-app 创建一个 React 项目

• 创建一个demo的React项目

create-react-app demo 

• 引入组件

在 package.json 依赖中加入

  "aip-module": "latest"

• 安装依赖

npm install

• 开始使用组件

在 src/App.js 里面引入组件，然后测试最简单的 Message 组件

修改后的 App.js 代码如下

import React from 'react';
import logo from './logo.svg';
import {Message} from 'aip-module';
import './App.css';

class App extends React.Component {

    showMessage = () => {
        Message.showMessage('Hello world');
    };

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <p>
                        Edit
                        <code>src/App.js</code>
                        and save to reload.
                    </p>
                    <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Learn React
                    </a>
                    <button onClick={this.showMessage}>点我</button>
                </header>
            </div>
        );
    }
}

export default App;

• 启动调试环境

npm run start

如果提示启动失败 JavaScript heap out of memory ，请将 package.json 的 react-scripts start 改为 react-scripts --max_old_space_size=2048 start， build 指令也修改以避免在构建的时候报相同的错误！

组件说明

所有的返回数据必须是如下的 标准 的格式

code: 200
data: [{"期间": "201601"}, {"期间": "201602"}, {"期间": "201603"}, {"期间": "201604"}, {"期间": "201605"}, {"期间": "201606"},…]
msg: "success"

返回的数据为 JSON 格式，并至少包含： code/data/msg 三个部分

最主要的组件 AIPSearchPanel 提供了 审友A7平台 标准的检索条件框，提供了动态构建检索条件（含关联）的能力，目前支持以下组件类型

• text 文本输入
• number 数值输入
• tree 树形
• select 列表
• table 表格
• checkbox 选择
• radio 单选
• number2 纯数值输入
• date 日期

在继承自 RefItem 的子组件中， type 属性必须是上述类型。

使用示例(最基本的属性)

<AIPSearchPanel key="searchpanel" loadedfunc={this.loaded} doSearch={this.doSearch}
                refid={this.state.refid} loadCacheFn={this.loadCacheFn}
                prefixUrl={servUrl + queryAnalysisPath + '/refrence/getrefrence?id='}/>

全局调试变量: window.isAipDebug
全局调试信息回显: window.aipInspect()
载入AIPSearchPanel的参照方法: window.realoadRefs(params)
显示AIP的版本: window.aipVersion

AIPTable

表格组件

@class AIPTable

@extends {Component}

@description 对于IUAP表格的封装

_ getSelectedDataFunc | | selectedList: List , record: Object , index: Number , newData: Object | 点击表格行的事件回调 ( 私有方法) spliceIndexCols | List | cols: List | 删除序号列，返回一个新的Columns

AIPSearchPanel

AIP参照搜索框组件

@class AIPSearchPanel

@extends { Component }

@description 配合参照设计显示搜索条件框

涉及数据结构

• 服务返回的参照数据必须符合结构

{
  "createtime": "2021-03-09",
  "creator": null,
  "orderindex": null,
  "name": "科目余额表参照",
  "refType": null,
  "description": "科目余额表查询条件",
  "refitems": [
    {
      "valuefield": "账套编号",
      "defaultValue": null,
      "multiple": "0",
      "refitem": [],
      "pageable": false,
      "displayorder": 0,
      "label": "账套名称",
      "type": "table",
      "url": "/dataretriver/retrive?type=ref&id=e44eb7e5-1e59-494d-9343-0831a3f4a4b8&index=0",
      "name": "账套编号",
      "options": [],
      "width": 200,
      "must": true,
      "id": "672db682-5dc1-4870-922e-8e8acf0c723e",
      "displayfield": "账套名称"
    },
    {
      "valuefield": "年度",
      "defaultValue": null,
      "multiple": "1",
      "refitem": [
        "账套编号"
      ],
      "pageable": false,
      "displayorder": 1,
      "label": "账套年度",
      "type": "select",
      "url": "/dataretriver/retrive?type=ref&id=e44eb7e5-1e59-494d-9343-0831a3f4a4b8&index=1",
      "name": "年度期间",
      "options": [],
      "width": 170,
      "must": true,
      "id": "5c55e835-3510-49c2-b18f-dd297e70cb34",
      "displayfield": "年度"
    },
    {
      "valuefield": "value",
      "defaultValue": null,
      "multiple": "0",
      "refitem": [],
      "pageable": false,
      "displayorder": 5,
      "label": null,
      "type": "select",
      "url": "/dataretriver/retrive?type=ref&id=e44eb7e5-1e59-494d-9343-0831a3f4a4b8&index=5",
      "name": "科目级次",
      "options": [
        {
          "label": "1级",
          "value": "1"
        },
        {
          "label": "到末级",
          "value": "到末级"
        }
      ],
      "width": 80,
      "must": true,
      "id": "0e29906b-7af4-4560-85f4-b98b10916c51",
      "displayfield": "label"
    }
  ],
  "id": "e44eb7e5-1e59-494d-9343-0831a3f4a4b8",
  "sourceref": null
}

doSearch | Function | | :white_check_mark: | 点击查询按钮触发的事件，会将目前的参照对象内容传递给参数 doSearch(params: Map{key(String): value(String)}): void encryption | Boolean | | :x: | 参数是否启用加密传输 fetchCallback | Function | | :x: | 每个参照请求完毕调用的回调，参数(data, condition, url) loadCacheFn | Function | | :x: | 条件缓存载入回调函数 (id): Promise 返回的 Promise，其中参数为 Map{key(String): value(String)} 该参数与 search 方法的参数应该是相同的 loadedfunc | Function | | :x: | 参照信息请求完毕后的事件回调,参数为(immediateSearch: bool) 在没有参照项的情况下，immediateSearch=true会告知立即进行检索，在有参照项的情况下，不会传递该参数 prefixUrl | String | | :white_check_mark: | 所有参照服务的请求路径，如果没有设置，将使用默认值(WINDOW_HOST.protocol + '//' + WINDOW_HOST.host + '/qa/refrence/getrefrence?id=') refid | String | | :white_check_mark: | 参照编号 searchBtnText | String | | :x: | 查询按钮显示内容(默认是"查询") service | PropTypes.map | | :x: | 注入的服务 { loadRefrence: (url/refid): Promise (response) 整个参照系载入的异步数据方法，返回标准response返回 componentName: (url/id, params): Promise (response) 每个组件载入数据的异步方法，返回标准response返回，每个组件的loadData会调用该方法 }

返回Map为 {compnentName: componentClass} _buildRefParams | Object : 返回依赖相关的参数 | name: String (参照的名称), needFields: | 构建依赖参照需要的参数对象 (私有方法) appendParam | | paramKey: String (加入参数的名称), paramValue: String (加入的参数值) | 给参照提供必要的参数 _buildRefDepends | Array | name: String (条件名), refrenceItems: Array (所有参照对象列表), cSet: Set (各个条件的参照表) | 构建指定条件的依赖快照 (私有方法) _afterBuildRefDepends | | refDepnedMaps: , refItems: Array (参照记录) | 重新整理通知列表，将参考实际字段修正事件通知列表 (私有方法) _mapKey2Array | Array | mp: | 将Map数据结构的key转为数组 (私有方法) _getRefByName | | refName: String | 获取参照项的组件引用(非参照项对象) (私有方法) _scheduler | | itemName: String (调度itemName条件的关联依赖组件请求，为空则从头调用) | 参照请求调度核心 (私有方法) _refItemValueChange | | itemName: String (参照名), value: String (参照当前值) | 参数数据项值改变通知 (私有方法) _resetState | | | 重新初始化部分对象变量 (私有方法) _loadRefrences | | params: | 载入（初始化）参照 (私有方法) _installServices | | | 注册全局服务，暴露部分信息到浏览器以便外部了解组件当前信息 (私有方法) _uninstallServices | | | (私有方法) getParams | Object : 返回参数，可能值为 null或者{paramKey1: paramValue, ...} | ignoreMust: Boolean ( 是否忽略必选，如果为true，将返回目前已选的条件信息，如果为false，有必选条件未选将返回null) | 获取当前状态选取的参数 search | | e: Event (可选参数) | 检索 reload | | | 重新载入所有参照数据 clear | | e: Event (可选参数) | 清空所有参照项的值 _getContextPath | String | path: String | 根据给定的path获取上下文路径 (私有方法) _eachRender | ReactElement | refItem: Object (参照项对象), idx: Number (序号) | 每个参照项的组件 (私有方法)

RefItem

基类提供每个参照项的基本处理例程和数据结构

@class RefItem

@extends { Component }

@description 所有的参照项组件的基类，每个对象的基本属性如下

       {
    "valuefield"
:
    "年度",
        "defaultValue"
:
    null,
        "multiple"
:
    "1",
        "refitem"
:
    [
        "账套编号"
    ],
        "pageable"
:
    false,
        "displayorder"
:
    1,
        "label"
:
    "账套年度",
        "type"
:
    "select",
        "url"
:
    "/dataretriver/retrive?type=ref&id=e44eb7e5-1e59-494d-9343-0831a3f4a4b8&index=1",
        "name"
:
    "年度期间",
        "options"
:
    [],
        "width"
:
    170,
        "must"
:
    true,
        "id"
:
    "5c55e835-3510-49c2-b18f-dd297e70cb34",
        "displayfield"
:
    "年度"
}
,

如果有defaultValue必须调用

// async or sync get load from remote or local
if (defaultValue) {
    // other code ...
    this.refItemValueChange(defaultValue);
}

getValue | String | | 获取值，按需 override setDefaultValue | | value: Object | 设置组件的默认值(可以随时调用) override 默认会赋值给 state.value

TextRef

文本类型的参照项是没有依赖参照的

@class TextRef

@extends { RefItem }

@description 纯输入参照组件

NumberPlainRef

更简单的数值类型的参照项

@class NumberPlainRef

@extends { RefItem }

@description 数值显示组件，可输入且会验证输入

NumberRef

数值类型的参照项与文本类型参照一样，没有依赖参照

@class NumberRef

@extends { RefItem }

@description 数值显示组件（包含+/-箭头）

SelectRef

下拉列表参照项组件

@class SelectRef

@extends { RefItem }

@description 下拉列表组件，支持选择时间（年度，月份），是/否等情况

fetchCallback | Function | | :x: | 数据返回后回调（只有在网络请求的情况下会触发） fetchCallback(data: Array, condition: Map, url: String) id | String | | :white_check_mark: | 参照项编号 multiple | String | | :x: | 是否允许多选，无值或者'0'表示不允许 name | String | | :white_check_mark: | 参照项名称 options | Array | | :x: | 在设置静态Option的情况下,直接设置的对象列表 type | String | | :white_check_mark: | 参照项类型 url | String | | :x: | 参照请求路径 valuefield | String | | :white_check_mark: | 返回值对象，实际字段名称 width | Number | | :x: | 组件宽度

返回的数据必须是数组

[
  {
    期间: "201601"
  },
  {
    期间: "201602"
  },
  ...
  {
    期间: "201612"
  }
]

_isArray | Boolean | v: Object | 判断给予的对象是否是Array类型 (私有方法) _getSingleLabelFromValue | String | v: String | 通过值反查该值对应的显示值(只返回第一个) (私有方法) _getLabelFromValue | Array | v: String | 通过值反查该值对应的显示值 (私有方法) _onChange | | v: String | 选择项变化事件 (私有方法) clear | | | 重置条件 override

CheckRef

多选框参照组件

@class CheckRef

@extends { RefItem }

@description 复选框组件

RadioRef

单选参照组件

@class RadioRef

@extends { RefItem }

@description 多个值单选情况使用

TableRef

表格参照组件

@class TableRef

@extends { RefItem }

@description 弹出表格组件

fetchCallback | Function | | :x: | 数据返回后回调（只有在网络请求的情况下会触发） fetchCallback(data: Array, condition: Map, url: String) id | String | | :white_check_mark: | 参照项编号 label | String | | :x: | 标题 matchData | Array | | :x: | 默认选择的记录 multiple | String | | :x: | 是否多选(null or '0') name | String | | :x: | 参照项名称 type | String | | :white_check_mark: | 参照项类型 url | String | | :x: | 请求路径 width | Number | | :x: | 组件宽度

TreeRef

树形组件

@class TreeRef

@extends { RefItem }

@description 弹出表格组件

fetchCallback | Function | | :x: | 数据返回后回调（只有在网络请求的情况下会触发） fetchCallback(data: Array, condition: Map, url: String) id | String | | :white_check_mark: | 参照项编号 label | String | | :x: | 标题 matchData | Array | | :x: | 默认选择的记录 multiple | String | | :x: | 是否多选(null or '0') name | String | | :white_check_mark: | 参照项名称 type | String | | :white_check_mark: | 参照项类型 url | String | | :x: | 请求路径 width | Number | | :x: | 组件宽度

value: '{"refname":"xx集团;yy集团","refpk":"001;002"}', matchData: { name: 'xx集团', refname: 'xx集团', code: '001' }, { name: 'yy集团', refname: 'yy集团', code: '002' },

treeData: { name: 'xxx', refname: 'xxx', code: '001', refpk: '001', childrens: { name, refname, code, refpkm }, {}, ... } onSave | | results: Array | 点击树组件的"确定"按钮触发时间 buildValue | Array | items: Array | 将请求数据转为组件所需数据格式 valueChange | | results: Array | 数据选择发生变化触发例程 getValue | String | | 获取值，按需 override clear | | | 重置值 override getRefTreeData | | value: String | 匹配给定值的树节点数据 filterTree | | value: , data: Array , originData: Array , level: number | 树数据过滤例程

FieldsFilter

字段过滤对话框

@description 提供字段过滤操作 @class FieldsFilter @extends { Component }

doSearch | Function | | :x: | 点击搜索事件 doSearch(params) params: {"field":"field1","assign":"==","value":"111"},{"andor":"&&", "field":"field2","assign":">","value":"222"} filterParam | Array | | :x: | 已存在的过滤条件 { andor, leftQ, field, assign, value, rightQ},... show | Boolean | | :white_check_mark: | 是否显示对话框 title | String | | :x: | 过滤对话框标题

open | | columns: Array (字段信息 {key, title}, ...), filters: Array (已存在的过滤条件 { andor, leftQ, field, assign, value, rightQ},...) | 打开字段过滤器 close | | | 关闭过滤器对话框 doSearch | | | 过滤触发事件调用 doClean | | | 清除事件调用

CrossRotate

行列互换设置对话框

@class {CrossRotate}

@extends {Component}

@description 弹出行列互换设置对话框

更多

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

依赖

• react
• tinper-bee
• ref-multiple-table
• ref-tree

北京用友审计软件有限公司 开发维护