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

create-react-app demo 

  "aip-module": "latest"

npm install --legacy-peer-deps

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;

export NODE_OPTIONS=--openssl-legacy-provider && npm run start

export NODE_OPTIONS=--openssl-legacy-provider && npm run build

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

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

@class AIPTable
 
@extends {Component}
 
@description 对于IUAP表格的封装

@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
}

@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"
:
    "年度"
}
,

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

@class TextRef
 
@extends { RefItem }
 
@description 纯输入参照组件

@class NumberPlainRef
 
@extends { RefItem }
 
@description 数值显示组件，可输入且会验证输入

@class NumberRef
 
@extends { RefItem }
 
@description 数值显示组件（包含+/-箭头）

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

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

@class CheckRef
 
@extends { RefItem }
 
@description 复选框组件

@class RadioRef
 
@extends { RefItem }
 
@description 多个值单选情况使用

@class TableRef
 
@extends { RefItem }
 
@description 弹出表格组件

@class TreeRef
 
@extends { RefItem }
 
@description 弹出表格组件

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

@class {CrossRotate}
 
@extends {Component}
 
@description 弹出行列互换设置对话框