Amis

来自ling
跳转至: 导航搜索

常用连接

https://aisuda.bce.baidu.com/amis/zh-CN/docs/index

https://aisuda.bce.baidu.com/amis/examples/index

https://github.com/aisuda/amis-formula

https://github.com/aisud



/home/admin/workspace/source/amis

自定义插件

node_modules/amis-editor-core/lib/plugin.d.ts

amis-plugin

编码规范

XXXXRender

XXXXEditor

XXXXTemplateEditor

如何定义编辑器脚手架

https://aisuda.bce.baidu.com/amis/zh-CN/docs/extend/editor#%E5%A6%82%E4%BD%95%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E5%99%A8%E8%84%9A%E6%89%8B%E6%9E%B6

如果希望拖入组件的时候,弹出个配置框,基于用户不同的配置,生成不同的初始数据。则这里需要用到 scaffoldForm 配置。

scaffoldForm = {
  title: '标题',
  body: [
    {
      name: 'target',
      label: 'Target',
      type: 'input-text'
    }
  ]
};
editor-scaffold-form

可用配置

title 脚手架框的标题
body 表单项配置,参考 amis 的 form 配置
mode 表单默认展示方式,参考 amis 的 form 配置
size 弹窗大小,参考 amis 的 dialog 配置
initApi 初始化接口
api 提交接口
validate 整体验证钩子
pipeIn?: (value: any) => any schema 配置转脚手架配置
pipeOut?: (value: any) => any 脚手架配置转 schema 配置
canRebuild?: boolean 是否允许重新构建

参考资料

amis-editor-demo amis 可视化编辑器, 在线体验:https://aisuda.github.io/amis-editor-demo

要使用编辑器必须熟悉 React,如果不了解建议使用速搭。

本地运行这个项目 npm i 安装依赖 npm run dev 等编译完成后本地打开页面看效果。 历史版本预览地址 5.6.2(2023-10-31) 5.6.1(2023.9.28) 5.4.1(2023.6.9) 4.1.0-beta.28(2022.5.27) 4.0.2-beta.10(2022-02-23) 3.3.5(2021-08-12) 在其他项目中使用 amis-editor

npm i amis-editor

使用 方法

import {Editor} from 'amis-editor';


render() {
  return (
    <Editor
      {...props}
    />
  )
}
属性说明:

value: any 值,amis 的 json 配置。
onChange: (value: any) => void。 当编辑器修改的时候会触发。
preview?: boolean 是否为预览状态。
autoFocus?: boolean 是否自动聚焦第一个可编辑的组件。
plugins 插件类集合


扩充自定义编辑器(新版) amis-editor 重构了一版,之前定义注册自定义组件的方式也能用,但是已经标记了 deprecated,新的添加自定义编辑器的方式有两种。

registerEditorPlugin 注册全局插件。 不注册,但是调用 <Editor> 的时候时候通过 plugins 属性传入。 效果都一样,重点还是怎么写个 Plugin,示例:

import {BasePlugin} from 'amis-editor';

export class MyRendererPlugin extends BasePlugin {
    rendererName = 'my-renderer';

    // 暂时只支持这个,配置后会开启代码编辑器
    $schema = '/schemas/UnkownSchema.json';

    // 用来配置名称和描述
    name = '自定义渲染器';
    description = '这只是个示例';

    // tag,决定会在哪个 tab 下面显示的
    tags = ['自定义', '表单项'];

    // 图标
    icon = 'fa fa-user';

    // 用来生成预览图的
    previewSchema = {
        type: 'my-renderer',
        target: 'demo'
    };

    // 拖入组件里面时的初始数据
    scaffold = {
        type: 'my-renderer',
        target: '233'
    };

    // 右侧面板相关
    panelTitle = '自定义组件';
    panelControls = [
        {
            type: 'tabs',
            tabsMode: 'line',
            className: 'm-t-n-xs',
            contentClassName: 'no-border p-l-none p-r-none',
            tabs: [
                {
                    title: '常规',
                    controls: [
                        {
                            name: 'target',
                            label: 'Target',
                            type: 'text'
                        }
                    ]
                },

                {
                    title: '外观',
                    controls: []
                }
            ]
        }
    ];
}

定义好 plugin 后,可以有两种方式启用。

// 方式 1,注册默认插件,所有编辑器实例都会自动实例话。

import {registerEditorPlugin} from 'amis-editor';
registerEditorPlugin(MyRendererPlugin);

// 方式2,只让某些编辑器启用

() => <Editor plugins={[MyRendererPlugin]} />;

前面的示例只做了简单的说明,可用属性还有, 具体还是先看 npm 包里面的 .d.ts 文件吧,后面再补充更详细的文档。

export interface PluginEventListener {
    onActive?: (event: PluginEvent<ActiveEventContext>) => void;

    /**
     * 事件,当有配置项插入前调用。通过 event.preventDefault() 可以干预。
     */
    beforeInsert?: (event: PluginEvent<InsertEventContext>) => false | void;
    afterInsert?: (event: PluginEvent<InsertEventContext>) => void;

    /**
     * 面板里面编辑修改的事件。
     */
    beforeUpdate?: (event: PluginEvent<ChangeEventContext>) => false | void;
    afterUpdate?: (event: PluginEvent<ChangeEventContext>) => void;

    /**
     * 更新渲染器,或者右键粘贴配置。
     */
    beforeReplace?: (event: PluginEvent<ReplaceEventContext>) => false | void;
    afterReplace?: (event: PluginEvent<ReplaceEventContext>) => void;

    /**
     * 移动节点的时候触发,包括上移,下移
     */
    beforeMove?: (event: PluginEvent<MoveEventContext>) => false | void;
    aftterMove?: (event: PluginEvent<MoveEventContext>) => void;

    /**
     * 删除的时候触发
     */
    beforeDelete?: (event: PluginEvent<BaseEventContext>) => false | void;
    afterDelete?: (event: PluginEvent<BaseEventContext>) => void;

    beforeResolveEditorInfo?: (event: PluginEvent<RendererInfoResolveEventContext>) => false | void;
    afterResolveEditorInfo?: (event: PluginEvent<RendererInfoResolveEventContext>) => void;

    beforeResolveJsonSchema?: (event: PluginEvent<RendererJSONSchemaResolveEventContext>) => false | void;
    afterResolveJsonSchema?: (event: PluginEvent<RendererJSONSchemaResolveEventContext>) => void;

    onDndAccept?: (event: PluginEvent<DragEventContext>) => false | void;

    onBuildPanels?: (event: PluginEvent<BuildPanelEventContext>) => void;

    onBuildContextMenus?: (event: PluginEvent<ContextMenuEventContext>) => void;

    onPreventClick?: (event: PluginEvent<PreventClickEventContext>) => false | void;
}

/**
 * 插件的 interface 定义
 */
export interface PluginInterface extends Partial<BasicRendererInfo>, Partial<BasicSubRenderInfo>, PluginEventListener {
    readonly manager: EditorManager;

    order?: number;

    /**
     * 渲染器的名字,关联后不用自己实现 getRendererInfo 了。
     */
    rendererName?: string;

    /**
     * 默认的配置面板信息
     */
    panelIcon?: string;
    panelTitle?: string;
    panelControls?: Array<any>;
    panelDefinitions?: any;
    panelApi?: any;
    panelSubmitOnChange?: boolean;
    panelControlsCreator?: (context: BaseEventContext) => Array<any>;

    /**
     * 返回渲染器信息。不是每个插件都需要。
     */
    getRendererInfo?: (context: RendererInfoResolveEventContext) => BasicRendererInfo | void;

    /**
     * 生成节点的 JSON Schema 的 uri 地址。
     */
    buildJSONSchema?: (context: RendererJSONSchemaResolveEventContext) => void | string;

    /**
     * 构建右上角功能按钮集合
     */
    buildEditorToolbar?: (context: BaseEventContext, toolbars: Array<BasicToolbarItem>) => void;

    /**
     * 构建右键菜单项
     */
    buildEditorContextMenu?: (context: ContextMenuEventContext, menus: Array<ContextMenuItem>) => void;

    /**
     * 构建编辑器面板。
     */
    buildEditorPanel?: (context: BaseEventContext, panels: Array<BasicPanelItem>) => void;

    /**
     * 构建子渲染器信息集合。
     */
    buildSubRenderers?: (
        context: RendererEventContext,
        subRenderers: Array<SubRendererInfo>,
        renderers: Array<RendererConfig>
    ) => BasicSubRenderInfo | Array<BasicSubRenderInfo> | void;
}

install

npm i @ant-design/pro-cli -g
pro create myapp

umi@3
simple
npm install copy-to-clipboard amis amis-core amis-editor amis-editor-core amis-formula amis-ui @fortawesome/fontawesome-free crypto-js --registry=https://registry.npm.taobao.org
npm install -D node-sass sass-loader monaco-editor-webpack-plugin --registry=https://registry.npm.taobao.org


npm install crypto-js js-md5 qs enquire-js gg-editor hash.js js-base64 lodash lodash-decorators memoize-one moment numeral path-to-regexp prop-types  rc-animate roadhog-api-doc --registry=https://registry.npm.taobao.org


npm install dva --registry=https://registry.npm.taobao.org

vue

https://blog.csdn.net/typ1805/article/details/131106994

yarn add amis copy-to-clipboard qs
yarn add vue-amis-sdk @fortawesome/fontawesome-free --save'

<template>
  <div id='app'>
    <vue-amis-sdk
      id='editorName'
      theme='cxd'
      className='is-fixed'
      :preview='isPreview'
      :isMobile='isMobile'
      @onChange='onChange'
      :value='schema'
    />
  </div>
</template>
<script>
import "amis-ui/lib/themes/cxd.css";
import "amis-ui/lib/themes/ang.css";
import "amis-editor/dist/style.css";
export default {
  name: 'App',
  data() {
    return {
      isPreview: false,
      isMobile: false,
      schema: {}
    }
  },
  methods: {
    onChange(e) {
      console.log(e)
    }
  }
}
</script>

数据链

https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/datascope-and-datachain

数据链的特性是,当前组件在遇到获取变量的场景(例如模板渲染、展示表单数据、渲染列表等等)时:

首先会先尝试在当前组件的数据域中寻找变量,当成功找到变量时,通过数据映射完成渲染,停止寻找过程;

当在当前数据域中没有找到变量时,则向上寻找,在父组件的数据域中,重复步骤1和2;

一直寻找,直到顶级节点,也就是page节点,寻找过程结束。

但是如果 url 中有参数,还会继续向上查找这层,所以很多时候配置中可以直接 ${id} 取地址栏参数。

想要将自己的服务中的数据保存到某个组件的数据域中,最好的方式就是为当前组件配置初始化接口:

{
  "type": "page",
  "initApi": "/amis/api/initData",
  "body": "Hello ${text}"
}

接口必须按照下面的格式返回:

{
  "status": 0,
  "msg": "",
  "data": {
    "text": "World!"
    ...其他字段
  }
}

注意:

并不是所有组件都支持配置初始化接口来实现数据域初始化操作,对于那些不支持配置初始化接口的组件来说,一般会使用 Service 组件 来辅助实现数据域初始化;

status、msg 和 data 字段为接口返回的必要字段;


另一种初始化当前数据域的方式是显式的设置组件的data属性值:

 "data": {
   "text": "World!",
   "name": "amis"
 },

在同时配置 初始化接口 和 data属性 时,数据域将会合并data属性值和初始化接口返回的数据

部分组件的某些交互或行为会对当前组件的数据域进行更新: data必须返回一个具有key-value结构的对象

使用数据链中的数据

{
  "type": "page",
  "data": {
    "myItems": [
      {
        "id": 1
      }
    ]
  },
  "body": {
    "type": "crud",
    "source": "${myItems}",
    "columns": [
      {
        "name": "id",
        "label": "ID"
      }
    ]
  }
}

具备数据域的组件 App Page Cards Chart CRUD CRUD2 Dialog Drawer List Page PaginationWrapper Service Wizard Combo InputArray Table Table2


自定义js

  "onEvent": {
    "init": {
      "weight": 0,
      "actions": [
        {
          "ignoreError": false,
          "script": "/* 自定义JS使用说明:\n  * 1.动作执行函数doAction,可以执行所有类型的动作\n  * 2.通过上下文对象context可以获取当前组件实例,例如context.props可以获取该组件相关属性\n  * 3.事件对象event,在doAction之后执行event.stopPropagation();可以阻止后续动作执行\n*/\n/*\nconsole.log(context.props.data?.security)\ncontext.props.data.security?.hasRole('admin')\n*/",
          "actionType": "custom"
        }
      ]
    }
  }

React-Mobx

React-Mobx(入门) https://blog.csdn.net/weixin_57844432/article/details/127923571

常用代码

下拉字典

      {
        "label": "选项",
        "type": "select",
        "name": "select",
        "source": "/api/future/amis/common/dictionary?code=user_type"
      }

自动查询

	private static final String EQUAL = "_equal";
	private static final String NOT_EQUAL = "_notequal";
	private static final String LIKE = "_like";
	private static final String LIKE_LEFT = "_likeleft";
	private static final String LIKE_RIGHT = "_likeright";
	private static final String NOT_LIKE = "_notlike";
	private static final String GE = "_ge";
	private static final String LE = "_le";
	private static final String GT = "_gt";
	private static final String LT = "_lt";
	private static final String DATE_GE = "_datege";
	private static final String DATE_GT = "_dategt";
	private static final String DATE_EQUAL = "_dateequal";
	private static final String DATE_LT = "_datelt";
	private static final String DATE_LE = "_datele";
	private static final String IS_NULL = "_null";
	private static final String NOT_NULL = "_notnull";
	private static final String IGNORE = "_ignore";

vue

close

ƒ (e3) closeById

getComponentById

getComponentByName

getComponents

getComponentsByRefPath

parent

registerComponent

reload

rendererType

send

unRegisterComponent

unmount

updateProps

updateSchema

            addChild(props: {
                id: string;
                type: string;
                label: string;
                path: string;
                isCommonConfig?: boolean | undefined;
                info?: RendererInfo | undefined;
                region?: string | undefined;
                getData?: (() => any) | undefined;
                preferTag?: string | undefined;
                schemaPath?: string | undefined;
                dialogTitle?: string | undefined;
                dialogType?: string | undefined;
                regionInfo?: RegionConfig | undefined;
                widthMutable?: boolean | undefined;
                memberIndex?: number | undefined;
            }): any;
            removeChild(child: any): void;
            toggleFold(e: import("react").MouseEvent<HTMLAnchorElement, MouseEvent>): void;
            patch(store: any, force?: boolean): void;
            updateSchema(value: any): void;
            updateSchemaStyle(value: any): void;
            setComponent(value: any): void;
            getComponent(): any;
            calculateHighlightBox(root?: any): void;
            resetHighlightBox(root: any): void;
            updateState(state: any, replace?: boolean): void;
            setWidthMutable(value: any): void;
            setHeightMutable(value: any): void;


<template>
  <el-button v-on:click="test">重置数据</el-button>
  <amis-renderer v-if="isReady" :schema="schema" :locals="locals" v-on:ready="ready" :props="props"/>
</template>
<script>
import AMISRenderer from "@/components/AMISRenderer.vue";
import {getSchemaByCode} from "@/views/future/amis/pages_service";
import {base_pages} from "@/views/future/amis/pages_schema";

export default {
  name: "Table",
  components: {
    "amis-renderer": AMISRenderer,
  },
  data: () => ({
    schema: {},
    locals: {},
    isReady: false,
    instance: null,
    props: {
      // https://aisuda.bce.baidu.com/amis/zh-CN/docs/extend/ui-library#%E7%9B%91%E5%90%AC%E5%B9%BF%E6%92%AD%E4%BA%8B%E4%BB%B6
      onBroadcast: (type, rawEvent, data) => {
        alert(type);
        console.log(type, rawEvent, data);
      },

      onFinished: (values) => {
        alert("提交成功" + JSON.stringify(values, null, 2));
      },
    },
  }),
  mounted() {
    this.initSchema();
  },
  methods: {
    async initSchema() {
      let res = await getSchemaByCode('amis_pages');
      let content = res?.data?.data?.content;
      if (content) {
        this.schema = JSON.parse(content)
        this.isReady = true
      }
    },
    test() {
      let schema = base_pages()
      this.schema = schema;
      this.instance.updateSchema(schema)
    },
    ready({instance}) {
      console.log(instance)
      this.instance = instance;
    },
  }
}
</script>


embed

amis.embed(
  '#root',
  {
    // amis schema
  },
  {
    // 这里是初始 props
  },
  {
    tracker: (eventTrack, props) => {
      const blob = new Blob([JSON.stringify(eventTrack)], {
        type: 'application/json'
      });
      navigator.sendBeacon('/tracker', blob);
    }
  }
);

https://aisuda.bce.baidu.com/amis/zh-CN/docs/extend/tracker

增删改查

列选择不显示

 "columnsTogglable":false,

分页

  • 分页参数修改: current,size

日期

  • 日期需要在代码手工配置,编辑器看到的是假的
{
        "type": "input-date",
  "valueFormat": "YYYY-MM-DD HH:mm:ss",
  "format": "YYYY-MM-DD"
        "name": "date",
        "label": "日期"
}

link

  "onEvent": {
    "click": {
      "weight": 0,
      "actions": [
        {
          "ignoreError": false,
          "actionType": "url",
          "args": {
            "url": "/amis/preview/AMIS_MODULE",
            "params": {
              "code": "$code"
            },
            "blank": false
          }
        }
      ]
    }
  },
  • link
 "type": "link",
 "name": "name",
 "label": "产品名称",
 "id": "u:92c16b5150a7",
 "placeholder": "-",
 "className": "",
 "href": "../MCT_TEMPLATE_VERSION?templateId=${id}",
 "body": "${name}",
 "blank": false

dialog

{
  "type": "button",
  "label": "编辑",
  "id": "u:e8a4dc67d911",
  "confirmText": "",
  "dialog": {
    "type": "dialog",
    "id": "u:a838e1df6de7",
    "actions": [
      {
        "type": "button",
        "actionType": "cancel",
        "label": "取消",
        "id": "u:ec2c156fe586"
      },
      {
        "type": "button",
        "actionType": "confirm",
        "label": "确定",
        "primary": true,
        "id": "u:aa8d27044fd3"
      }
    ],
    "body": [
      {
        "type": "form",
        "id": "u:fc939a8c9307",
        "title": "表单",
        "mode": "horizontal",
        "dsType": "api",
        "feat": "Insert",
        "body": [
          {
            "type": "input-text",
            "label": "代码",
            "name": "code",
            "id": "crud_amissystemmodule_headerToolbar_add_dialog_form_code"
          },
          {
            "type": "input-text",
            "label": "名称",
            "name": "label",
            "id": "crud_amissystemmodule_headerToolbar_add_dialog_form_label"
          },
          {
            "type": "input-text",
            "label": "描述",
            "name": "des",
            "id": "crud_amissystemmodule_headerToolbar_add_dialog_form_des"
          },
          {
            "type": "input-text",
            "label": "id",
            "id": "crud_amissystemmodule_headerToolbar_add_dialog_form_systemId",
            "name": "id",
            "readOnly": true,
            "visible": false
          }
        ],
        "actions": [
          {
            "type": "button",
            "label": "提交",
            "onEvent": {
              "click": {
                "actions": [
                  {
                    "actionType": "submit",
                    "componentId": "u:fc939a8c9307"
                  }
                ]
              }
            },
            "level": "primary",
            "id": "u:bb7fba1757d8"
          }
        ],
        "resetAfterSubmit": true,
        "api": {
          "method": "post",
          "url": "/api/future/amis/amissystemmodule/updateById/${id}",
          "requestAdaptor": "",
          "adaptor": "",
          "messages": {
          },
          "data": {
            "&": "$$"
          }
        }
      }
    ],
    "size": "xl",
    "showCloseButton": true,
    "closeOnOutside": false,
    "closeOnEsc": false,
    "showErrorMsg": true,
    "showLoading": true,
    "themeCss": {
      "dialogClassName": {
        "box-shadow": "var(--shadows-shadow-none)"
      }
    }
  },
  "actionType": "dialog"
}

确认

{
  "type": "button",
  "label": "删除",
  "actionType": "ajax",
  "level": "link",
  "className": "text-danger",
  "confirmText": "确定要删除?",
  "api": {
    "method": "post",
    "url": "/api/future/amis/amistable/removeById/${id}",
    "requestAdaptor": "",
    "adaptor": "",
    "messages": {
    }
  },
  "id": "crud_amistable_buttons_remove"
}

service

  "type": "service",
  "id": "u:207ee4f65b74",
  "api": {
    "url": "/api//future/amis/amissystem/getById/${systemId}",
    "method": "get",
    "requestAdaptor": "",
    "adaptor": "",
    "messages": {
    },
    "responseData": {
      "system": "$$"
    }
  },
  "body": [
...
  ],
  "dsType": "api"

全局默认值

  "data": {
    "templateId": "1722108978906890241"
  }

更新全局 data

  • 如何更新全局 data?

使用下面的方式

amisScoped.updateProps({
  data: {
    xxx: 'yyy'
  }
})


{
  "type": "page",
  "id": "page02",
  "initApi": "/amis/api/mock2/page/initData",
  "body": [
    {
      "type": "button",
      "label": "更新数据",
      "className": "mb-2",
      "onEvent": {
        "click": {
          "actions": [
            {
              "componentId": "page02",
              "actionType": "setValue",
              "args": {
                "value": {
                  "date": "2023-05-01"
                }
              },
              "dataMergeMode": "override"
            }
          ]
        }
      }
    },
    {
      "type": "tpl",
      "tpl": "标题:${title|default:'-'} 当前时间是:${date}"
    }
  ]
}

动态列

since 1.1.6

在 1.1.6 之前的版本,只能通过 service + schemaApi 让后端返回 schema 配置来实现,1.1.6 版本之后可以直接通过 crud 的数据接口返回了。 用这种方式可以简化动态列的实现,与 items 并列返回 columns 数组即即可。

快速保存

{
  "type": "page",
  "body": {
    "type": "crud",
    "syncLocation": false,
    "api": "/amis/api/mock2/sample",
    "quickSaveApi": "/amis/api/mock2/sample/bulkUpdate",
    "columns": [
      {
        "name": "id",
        "label": "ID"
      },
      {
        "name": "grade",
        "label": "CSS grade",
        "quickEdit": {
          "type": "select",
          "options": [
            "A",
            "B",
            "C",
            "D",
            "X"
          ]
        }
      }
    ]
  }
}


{
  "name": "condition",
  "label": "condition",
  "id": "u:70feaba63697",
  "placeholder": "-",
  "quickEdit": {
    "type": "select",
    "mode": "popOver",
    "saveImmediately": {
      "api": {
        "method": "post",
        "url": "/api/sta/template/mcttemplateservice/updateById/${id}"
      }
    },
    "id": "u:e9520ffb3ac5",
    "options": [
      {
        "label": "A",
        "value": "a"
      },
      {
        "label": "B",
        "value": "b"
      },
      {
        "label": "C",
        "value": "c"
      }
    ]
  }
}

{
  "type": "input-tree",
  "label": "",
  "name": "tree",
  "id": "u:8475420cc6b0",
  "multiple": false,
  "enableNodePath": false,
  "hideRoot": true,
  "showIcon": true,
  "initiallyOpen": true,
  "onlyLeaf": true,
  "creatable": false,
  "editable": false,
  "removable": false,
  "source": {
    "url": "/api/sta/price/pricetableversion/getTemplateTree",
    "method": "get",
    "requestAdaptor": "",
    "adaptor": "",
    "messages": {
    }
  },
  "labelField": "label",
  "valueField": "value",
  "onEvent": {
    "change": {
      "weight": 0,
      "actions": [
        {
          "componentId": "u:5dddc84e4595",
          "ignoreError": false,
          "actionType": "reload",
          "args": {
            "resetPage": true
          },
          "data": {
            "category": "${value}"
          },
          "dataMergeMode": "override"
        }
      ]
    }
  }
}



        "options": [
          {
            "label": "DS价格簿",
            "value": "DS",
            "children": [
              {
                "label": "DS早期价格簿",
                "value": "DS_PRE"
              },
              {
                "label": "DS后期价格簿",
                "value": "DS_LATER"
              },
			  {
                "label": "DS商业化价格簿",
                "value": "DS_COM"
              },
            ]
          },
          {
            "label": "DP价格簿",
            "value": "DP",
            "children": [
              {
                "label": "DP早期价格簿",
                "value": "DP_PRE"
              },
              {
                "label": "DP后期价格簿",
                "value": "DP_LATER"
              },
			  {
                "label": "DP商业化价格簿",
                "value": "DP_COM"
              },
            ]
          }
		]

刷新curd

{
  "type": "input-tree",
  "label": "",
  "name": "tree",
  "id": "u:8475420cc6b0",
  "multiple": false,
  "enableNodePath": false,
  "hideRoot": true,
  "showIcon": true,
  "initiallyOpen": true,
  "onlyLeaf": true,
  "creatable": false,
  "editable": false,
  "removable": false,
  "labelField": "label",
  "valueField": "value",
  "onEvent": {
    "change": {
      "weight": 0,
      "actions": [
        {
          "componentId": "u:5dddc84e4595",
          "ignoreError": false,
          "actionType": "reload",
          "args": {
            "resetPage": true
          },
          "data": {
            "category": "${value}"
          },
          "dataMergeMode": "override"
        }
      ]
    }
  },
  "options": [
    {
      "label": "DS价格簿",
      "value": "DS",
      "children": [
        {
          "label": "DS早期价格簿",
          "value": "DS_PRE"
        },
        {
          "label": "DS后期价格簿",
          "value": "DS_LATER"
        },
        {
          "label": "DS商业化价格簿",
          "value": "DS_COM"
        }
      ]
    },
    {
      "label": "DP价格簿",
      "value": "DP",
      "children": [
        {
          "label": "DP早期价格簿",
          "value": "DP_PRE"
        },
        {
          "label": "DP后期价格簿",
          "value": "DP_LATER"
        },
        {
          "label": "DP商业化价格簿",
          "value": "DP_COM"
        }
      ]
    }
  ]
}

触发广播动作

{
  "type": "page",
  "body": [
    {
      "name": "role",
      "type": "select",
      "label": "广播一下",
      "mode": "row",
      "options": [
        {
          "label": "海贼王的男人",
          "value": "路飞"
        },
        {
          "label": "海上华佗",
          "value": "乔巴"
        },
        {
          "label": "海上食神",
          "value": "山治"
        }
      ],
      "onEvent": {
        "change": {
          "actions": [
            {
              "actionType": "broadcast",
              "args": {
                "eventName": "broadcast_1"
              },
              "data": {
                "myrole": "${role}",
                "age": 18
              }
            }
          ]
        }
      }
    },
    {
      "type": "form",
      "id": "form_001_form_01",
      "title": "表单1(优先级低)",
      "name": "sub-form1",
      "body": [
        {
          "type": "input-text",
          "label": "昵称",
          "name": "myname",
          "disabled": false,
          "mode": "horizontal"
        }
      ],
      "onEvent": {
        "broadcast_1": {
          "actions": [
            {
              "actionType": "reload",
              "data": {
                "myname": "${myrole}"
              }
            },
            {
              "actionType": "toast",
              "args": {
                "msgType": "info",
                "msg": "表单1刷新完成"
              }
            }
          ]
        }
      }
    },
    {
      "type": "form",
      "name": "form2",
      "id": "form_002",
      "title": "表单2(优先级中)",
      "body": [
        {
          "type": "input-text",
          "label": "角色",
          "name": "myrole",
          "disabled": false,
          "mode": "horizontal"
        },
        {
          "type": "input-text",
          "label": "年龄",
          "name": "age",
          "disabled": false,
          "mode": "horizontal"
        }
      ],
      "onEvent": {
        "broadcast_1": {
          "weight": 2,
          "actions": [
            {
              "actionType": "reload",
              "data": {
                "myrole": "${myrole}",
                "age": "${age}"
              }
            },
            {
              "actionType": "toast",
              "args": {
                "msgType": "info",
                "msg": "表单2刷新完成"
              }
            }
          ]
        }
      }
    },
    {
      "type": "form",
      "name": "form3",
      "id": "form_003",
      "title": "表单3(优先级高)",
      "body": [
        {
          "type": "input-text",
          "id": "form_003_text_01",
          "label": "职业",
          "name": "job",
          "disabled": false,
          "mode": "horizontal"
        }
      ],
      "api": "https://api/form/form3",
      "onEvent": {
        "broadcast_1": {
          "weight": 3,
          "actions": [
            {
              "actionType": "reload",
              "data": {
                "job": "${myrole}"
              }
            },
            {
              "actionType": "toast",
              "args": {
                "msgType": "info",
                "msg": "表单3刷新完成"
              }
            }
          ]
        }
      }
    }
  ]
}

事件动作

        {
          "actionType": "reload",
          "ignoreError": false,
          "args": {
            "resetPage": true
          },
          "data": {
            "series": "${value}"
          },
          "dataMergeMode": "override",
          "componentName": "crud"
        },
        {
          "actionType": "setValue",
          "args": {
            "series": "${value}"
          },
          "componentName": "form_add"
        }

visibleOn

 "visibleOn": "${series!=null}"
{
  "type": "page",
  "body": {
    "type": "form",
    "body": [
      {
        "type": "radios",
        "name": "foo",
        "label": false,
        "options": [
          {
            "label": "类型1",
            "value": 1
          },
          {
            "label": "类型2",
            "value": 2
          }
        ]
      },
      {
        "type": "input-text",
        "name": "text1",
        "label": false,
        "placeholder": "选中 类型1 时可见",
        "visibleOn": "${foo == 1}"
      },
      {
        "type": "input-text",
        "name": "text2",
        "label": false,
        "placeholder": "选中 类型2 时不可点",
        "disabledOn": "${foo == 2}"
      }
    ]
  }
}

</source>

service 控制显隐藏

{
  "type": "service",
  "body": [
    {
      "type": "checkboxes",
      "label": "",
      "multiple": true,
      "id": "u:f8da589d018a",
      "checkAll": false,
      "joinValues": true,
      "labelField": "name",
      "valueField": "id",
      "onEvent": {
        "change": {
          "weight": 0,
          "actions": [
            {
              "ignoreError": false,
              "outputVar": "responseResult",
              "actionType": "ajax",
              "options": {
                "silent": false
              },
              "api": {
                "url": "/api/sta/project/projectquotationitems/saveProjectQuotationItemsCheck",
                "method": "post",
                "requestAdaptor": "",
                "adaptor": "",
                "messages": {
                },
                "dataType": "json",
                "data": {
                  "projectId": "${project.id}",
                  "quotationId": "${quotationId}",
                  "templateItemId": "${value}",
                  "quotationWeightId": 1
                }
              }
            },
            {
              "componentId": "u:e7fc4757ba9a",
              "ignoreError": false,
              "actionType": "reload"
            }
          ]
        }
      },
      "name": "items.value",
      "source": "${options}",
      "value": ""
    },
    {
      "type": "each",
      "name": "options",
      "items": {
        "type": "panel",
        "body": [
          {
          }
        ],
        "id": "u:vo4tcoq1ybg6",
        "title": "${name}",
        "affixFooter": false,
        "visibleOn": "${checked}",
        "style": {
          "display": "block"
        }
      },
      "placeholder": "",
      "style": {
        "position": "static",
        "display": "block",
        "marginTop": "10px",
        "marginBottom": "10px"
      },
      "isFixedHeight": false,
      "isFixedWidth": false,
      "size": "none",
      "id": "u:9b39ebfdf427",
      "maxLength": 100
    }
  ],
  "id": "u:e7fc4757ba9a",
  "name": "checkboxes",
  "dsType": "api",
  "api": {
    "url": "/api/sta/project/projectquotationitems/getProjectItems?quotationWeightId=1&category=ExProduction",
    "method": "get",
    "requestAdaptor": "",
    "adaptor": "",
    "messages": {
    },
    "responseData": {
      "items": "$$",
      "options": "${options}"
    }
  }
}

复选框

joinValues必须和name对应的表单字段保持数据结构一致

默认值,切记只能是静态值,不支持取变量,跟数据关联是通过设置 name 属性来实现的。

 "joinValues": true,
 "name": "items.value",
 "source": "${options}"


{
  "type": "checkboxes",
  "label": "",
  "multiple": true,
  "id": "u:f8da589d018a",
  "checkAll": false,
  "joinValues": true,
  "labelField": "name",
  "valueField": "id",
  "onEvent": {
    "change": {
      "weight": 0,
      "actions": [
        {
          "ignoreError": false,
          "outputVar": "responseResult",
          "actionType": "ajax",
          "options": {
            "silent": false
          },
          "api": {
            "url": "/api/sta/project/projectquotationitems/saveProjectQuotationItemsCheck",
            "method": "post",
            "requestAdaptor": "",
            "adaptor": "",
            "messages": {
            },
            "dataType": "json",
            "data": {
              "projectId": "${project.id}",
              "quotationId": "${quotationId}",
              "templateItemId": "${value}",
              "quotationWeightId": 1
            }
          }
        },
        {
          "componentId": "u:e7fc4757ba9a",
          "ignoreError": false,
          "actionType": "reload"
        }
      ]
    }
  },
  "name": "items.value",
  "source": "${options}"
}


git

git config merge.defaultToUpstream true

ibiz

示例系统

http://101.132.236.47:58955/webvue3/#/-/index/-

preview_admin/123456

https://www.yuque.com/ibiz/introduction/dtdxda

https://www.yuque.com/ibiz/introduction/gt5z9i

工具的介绍和入门操作的文档

视图分类概览图

https://yuque.com/ibiz/wuf19n/yena9h

docker run -d --privileged -p 40443:443 -p 40444:80 -p 40000-40200:30000-30200 --name rancher -e CATTLE_BOOTSTRAP_PASSWORD=123456 -e EIP=192.168.31.13 -v /alidata/dockerdata/ibiz:/ibiz --restart=unless-stopped registry.cn-shanghai.aliyuncs.com/ibiz_community/rancher:v2.6.8-ibizcentral-ce
docker run -d --privileged --name rancher -e CATTLE_BOOTSTRAP_PASSWORD=123456 -e EIP=192.168.31.13 -v /alidata/dockerdata/ibiz:/ibiz --restart=unless-stopped registry.cn-shanghai.aliyuncs.com/ibiz_community/rancher:v2.6.8-ibizcentral-ce

docker run -d --privileged --network=host --name rancher -e CATTLE_BOOTSTRAP_PASSWORD=123456 -e EIP=192.168.31.13 -v /alidata/dockerdata/ibiz:/ibiz --restart=unless-stopped registry.cn-shanghai.aliyuncs.com/ibiz_community/rancher:v2.6.8-ibizcentral-ce 

https://ling.ling2.cn:30002

admin/123456

http://ling.ling2.cn:30080/centralstudio/

poc_admin/123456


docker

git pull
cd /workspace/admin-boot/dockerfile
docker build -f Dockerfile_centos7_develop -t registry.cn-shanghai.aliyuncs.com/ling/centos7-develop:1.0 .

docker rm -f develop

docker run --name develop -it -p 2890:2888 -p 2891:2888 \
-v /alidata/dockerdata/repository:/workspace/repository \
-v /alidata/dockerdata/develop/node_modules1:/workspace/admin-ui/node_modules \
-d registry.cn-shanghai.aliyuncs.com/ling/centos7-develop:1.0

docker logs -f develop

错误处理

Can't resolve 'iconfont.eot'

/node_modules/amis/sdk/iconfont.css


./iconfont.eot

scss this.getOptions is not a function

正确的版本组合 经不断尝试,正确的组合有:

node-sass 6.0.1 , sass-loader 10.0.1
node-sass 4.14.1, sass-loader 7.3.1
node-sass 4.7.2 , sass-loader 7.0.3
node-sass 4.3.0 , sass-loader 4.1.1

scss

yarn add node-sass sass-loader --dev