App Designer Renderer By AntDesign

文档已过期！！！

Demo

  import { App,AppBean } from 'apd-renderer/dist/index'

  const demoData = {
    app: [...],
    buttons: [...],
    actions: [...]
  };
  const library = [...];
  const lookups = [...];
  const menus = [...];

  const plugins = {
    "custom.js": React.lazy(() => import('./custom') ),
    "tableUploadBtn": React.lazy(() => import('./TableUploadButton') )
  };
  
  const customEvents = (appBean)=>{
    return {
      test: () => {
        console.log(appBean);
      }
    }
  };

  const query = (p,v):Promise => {...}
  
  const AppDemo = () => {
    const model = new AppBean({
      events: customEvents,
      query: query,
      appId: 'workorder',
      appName: '工单管理',
    });
    model.initLIBRARY(library);
    model.initLOOKUPS(lookups);
    model.initMENUS(menus);
    useEffect(()=>{
      model.init(demoData);
    },[]);
    return (
      <App model={model} plugins={plugins}/>
    );
  };

API

AppBean

属性

名称	描述	类型	默认值
buttons	应用主按钮	IWidgetData[]	[ ]
actions	应用更多操作按钮内容	IAppAction[]	[ ]
widgets	应用控件集合	IWidgetData[]	[ ]
LIBRARY	公用控件集合	IWidgetData[]	[ ]
MENUS	公用菜单集合	IWidgetData[]	[ ]
LOOKUPS	公用查找框集合	IWidgetData[]	[ ]
rootWidget	应用根控件(type='canvas')	IWidgetData	{type:'canvas',detail:{}}
items	应用主数据集合	any[]	[]
item	应用当前选择的主数据	any	{}
total	应用主数据总条数	number	0
modelName	应用主模块名称	string	''
data	应用当前选择主数据的变更数据	any	{}
tabId	应用当前显示的标签栏ID	string	''
tableSelectedRow	应用所有表格的选择行存储对象	IAppTableSelectedRow	{}

事件

名称	描述	参数	回调事件
find	查找主应用数据集合		$modelName:find:$tableId
findByQuery	查找指定应用数据集合	fields	$modelName:findByQuery:$tableId
findOne	查找主应用具体一条数据(value为id值)		$modelName:findOne、itemUpdated
findByTable	查找具体一个表格的数据		$modelName:find:$tableId
findByDialog	查找Dialog下的数据		$modelName:findByDialog:$dialogId
findByTab	查找主应用某个标签下的数据		$modelName:findOne、itemUpdated
findList	查找下拉框数据集合		$modelName:findList:$comboboxId
findTree	查找树数据集合		$modelName:findTree:$treeId
selectRecord	主应用选择一条数据(value为选择的record对象)		findOne、changeAppTab
dialogOpen	打开弹出框(eventValue为dialogId)		widgetsUpdated
dialogOk	弹出框确定(targetId为目标控件ID)		widgetsUpdated
dialogClose	打开弹出框(eventValue为dialogId)		widgetsUpdated
changeDataByForm	更新主应用选择数据的属性
changeDataByTable	更新主应用选择数据的子表数据
selectTableRows	更新一个表格的选择行数据(widgetId为表格控件ID)		$modelName:selectedRows:$tableId
showLOOKUPS	弹出一个查找表格框	widgetId,lookupId	afterShowLOOKUPS
fetchLOOKUPS	刷新一个查找表格框的数据	widgetId,lookupId	afterFetchLOOKUPS
toggleLOOKUPS	表格点击一列回填到主应用文本框	widgetId,record	setValue,afterHideLOOKUPS
insert	主应用添加一条数据	{}
save	主应用保存数据	{}
duplicate	主应用复制一条数据	{}
previous	主应用翻到上一条数据	{}
next	主应用翻到下一条数据	{}
routeWF	主应用发送工作流	{}
searchMore	主应用弹出高级搜索对话框	{}
bookmark	主应用列表设置书签	{}
reset	主应用重置数据	{}
itemUpdated	更新主应用数据	item:any
widgetsUpdated	更新控件	widgets:IWidgetData[]
setValue	设置主应用当前选择数据值	values:any
changeAppTab	设置主应用按钮是否可点	tab:IWidgetData
setAppBtnDisabled:$AppBtnId	设置主应用按钮是否可点	flag:boolean
afterSave	保存后触发	{}

回调事件

以 modelName:eventName:widgetId 形式表示, modelName代表触发该事件的模块名默认为主应用模块,widgetId代表触发该事件的控件ID

名称	描述	参数	源组件
find	刷新table数据	items,total	Table
findByQuery	用于在自定义组件中的定制查询	items,total	Custom
findByDialog	更新Dialog的item数据	item	Dialog,Table
selectedRows	选择table数据	rows	Table
updatedRows	更新table数据	rows	Table
findOne	刷新主应用item数据	item	TabGroup
findList	刷新下拉框数据	items,total	Combobox
findTree	刷新树形数据	items	Tree

方法

名称	描述	参数	返回值
updateWidgets	更新控件集	widgets:IWidgetData[],updateLibrary:boolean	无
initLOOKUPS	更新查找框控件集	widgets:IWidgetData[]	无
initMENUS	更新下拉菜单控件集	widgets:IWidgetData[]	无
getMENUS	获取指定id的菜单控件及其子级	menuId:string	IWidgetData[]
initLIBRARY	更新公用控件集	widgets:IWidgetData[]	无
getWidgets	获取全部控件	无	无
getRootWidget	获取画布根控件	无	无
getModelName	获取主应用ModelName	无	无
getTableSelectedRows	获取一个表格的选择行集合	tableId	无
getItem	获取主应用选择的单条数据	无	any
getAppButtons	获取主应用按钮	无	IWidgetData[]
getAppActions	获取主应用ModelName	无	IAppAction[]
getValidation	获取字段验证函数	无	(...args: any[])=>Promise 或 undefined
needToSave	判断离开时是否需要保存	无	boolean

Plugins

const plugins = {
  "xxxx": React.lazy(() => import('./xxx/xxx') ),
  "xxxxx": React.lazy(() => import('./xx/xxxx/xxx') )
};
<AppRenderer model={model} plugins={plugins}/>

plugins属性名对应custom控件的fileName属性,属性值为懒加载的React组件,组件的props会自动注入model和widget属性

LOOKUPS

配置lookup.js

const lookups = [
  { type: 'table', id: 'selectEQ', title: '表格',detail: { pageSize:5,inputMode: 'readonly'}},
  { type: 'tablecol', parentId: 'selectEQ1', id: 'canvas_dialog2_table_EQ_col1', title: '表格列',
    detail: { label: '装备编号',dataAttribute:'eqNum',event:'toggleLOOKUPS'}},
  { type: 'tablecol', parentId: 'selectEQ1', id: 'canvas_dialog2_table_EQ_col2', title: '表格列',
    detail: { label: '装备描述',dataAttribute:'desc'}},

  { type: 'table', id: 'selectWO', title: '表格',detail: { pageSize:5,inputMode: 'readonly',width: 800}},
    { type: 'tablecol', parentId: 'selectWO', id: 'canvas_dialog2_table_WO_col1', title: '表格列',
      detail: { label: '工单编号',dataAttribute:'woNum',event:'toggleLOOKUPS'}},
    { type: 'tablecol', parentId: 'selectWO', id: 'canvas_dialog2_table_WO_col2', title: '表格列',
      detail: { label: '工单描述',dataAttribute:'desc'}},
    { type: 'tablecol', parentId: 'selectWO', id: 'canvas_dialog2_table_WO_col3', title: '表格列',
      detail: { label: '状态',dataAttribute:'status'}},
    { type: 'tablecol', parentId: 'selectWO', id: 'canvas_dialog2_table_WO_col4', title: '表格列',
      detail: { label: '创建时间',dataAttribute:'created_time'}}
];

通过AppBean构造函数或initLOOKUPS方法加载

const demoData = [
  ...
  { type: 'textbox', parentId: 'canvas_tabgroup1_tab2_row1_col2', id: 'canvas_tabgroup1_tab2_row1_col2_text1', title: '文本框',
     detail: {label:'主要装备',dataAttribute: 'eqNum', lookup: 'selectEQ', lookupKeyMap: [['eqNum','desc'],['eqNum','desc']]}},
  ...
];
const model = useMemo(()=> new AppBean(demoData),[]);
model.initLOOKUPS(lookups);

文本框、多部分文本、多行文本、表格列都可以配置lookup属性，配置了该属性后控件右侧会出现放大镜按钮 点击按钮弹出在LOOKUPS.js中配置的table，id对应lookup属性名， lookupKeyMap为二维数组，第一个数组为要赋值的源属性，第二个数组为table中包含的属性

Validation

  public getValidation(){
    return async (_rule, value, fieldName, record, _form) => {
      const response = await AppBean.validate({ ...record, [fieldName]: value }); // 远程请求
      if(response){
        const { status,message } = response;
        if(status === 2)
          return Promise.reject(message); // 输入值无效
        else
          return Promise.resolve(); // 输入值有效
      }
      else
        return Promise.resolve();
    }
  }

通过覆盖getValidation方法完成页面属性的校验，当该属性detail的validate为true时生效