apd-renderer v0.2.93

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

属性

事件

回调事件

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

方法

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时生效