editformfordnd

璞育云——表单引擎

ui：antd

表单设计器（pages/design）

基于react-dnd实现拖拽功能

表单编辑器（pages/edit）

表单编辑模块（components/FormEidt）

umi-library 打包

peerDependencies 必安装的modules "peerDependencies": { "antd": "^4.22.8", "braft-editor": "^2.3.9", // 富文本编辑器 "lodash": "^4.17.21", "react": "17.x", "react-dom": "17.x", "uuid": "^8.3.2" } 需引入 antd 样式 antd/dist/antd.css

安装第三方控件 vuera （可以在vue中使用react组件）

FormEidt组件API data 字段列表 Array value 字段值 object readOnly 只读 boolean params 配置项 object myRef form对象 { current: null }

配置项params request 请求接口方法 function

params参考 ` let params = { SELECT_SINGLE: { request: (params) => { return getCommonDictData({ ...params }); }, }, SELECT_MULTI: { request: (params) => { return getCommonDictData({ ...params }); }, }, AREA: { request: (params) => { /* 地区编码传code */ return getAreaList({ ...params }); }, }, ADDRESS: { request: (params) => { // 同area return getAreaList({ ...params }); }, }, MEMBER: { request: (params) => { return queryMemberListByDeptIds({ ...params }); }, }, DEPARTMENT: { request: (params) => { return showDeptTree({ ...params }); }, }, RICH_TEXT: { fileUpload: async (params) => { const { file, success } = params; const formData = new FormData(); formData.append('formId', formId); formData.append('file', file); const data = await fileUpload(formData, { onUploadProgress: (event) => { // 进度条 params.progress((event.loaded / event.total) * 100); }, });

    const { fileId, fileSource, previewPath } = data;
    success({
      url:
        process.env.NODE_ENV === 'development'
          ? `http://47.100.45.133:8994/business/file/imageDownload/${fileId}`
          : previewPath,
      meta: {
        id: fileId,
        title: fileSource,
        alt: fileSource,
      },
    });
  },
  fileRemove: (params) => {
    fileDelete({ ...params });
  },
},

} `