表单设计器相关.md 2.3 KB
Newer Older
徐立's avatar
徐立 committed
1 2 3 4
# 编辑日期

2020-4-20

徐立's avatar
徐立 committed
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
#依赖资源

```js
antd
antd-mobile
echarts-for-reac
qrcode.react
js-md5
moment
lodash
react-highlight-words
base-x
react-native-uuid
brace
react-ace
draft-js
reqwest
xlsx-oc
react-native-uuid
path-to-regexp
prop-types
徐立's avatar
徐立 committed
26
react-signature-canvas
徐立's avatar
徐立 committed
27
react-file-viewer
徐立's avatar
徐立 committed
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
```

##抽离注意

文件依赖的utils和config都抽离到了one_stop_public

## Model层注意

**webPublic/Models**下文件放入src下的Models中

**modileHome**:该接口用于请求事务详细数据和表单数据

**affair**:该接口用于请求当前事务的待办已办和事务提交

**新建流程提交模板**

```js
dispatch({
          type: 'affair/startProcess',
          payload: {
            content: JSON.stringify(values), // form表单控件拿取整个的数据
            level: radioValue, // 紧急度配置
            appId: this.state.appId, // 事务ID
            id: !!this.state.draftId ? this.state.draftId : null // 如果为草稿则传入ID进行修改
          },
          callback: val => {

          },
        });
```



## 生成新表单入口文件



```js
import Entrance from '@/webPublic/Entrance'
<Entrance
	id=''//传入事务Id
    form={form} // antd表单控件
    get={'web'} // 'web'或 'mobile'
   />
```

74 75 76
## 生成历史表单入口文件

### 引入
徐立's avatar
徐立 committed
77 78

```js
79 80 81 82
import HistoryForm from '@/webPublic/one_stop_public/Entrance/historyForm';
```

### 使用
徐立's avatar
徐立 committed
83

84 85 86 87 88 89
```js
<HistoryForm 
        data={this.state.data} // 'affair/getIdFormDetail' 接口返回数据
        form={this.props.form} // form控件
        isNewForm // 是否渲染需要当前用户填写的审核表单 为false只会渲染历史回显表单 
/>
徐立's avatar
徐立 committed
90 91
```

92 93


徐立's avatar
徐立 committed
94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
## 新增routerState

单个页面配置项如果需要使用**router路由参数**传值,则需要外部传入routerState

以下为示例

```js
let routerState = {
            history: this.props?.history,
            location: this.props?.location,
            match: this.props?.match,
            computedMatch: this.props?.computedMatch,
            route: this.props?.route
        } // 注 可选链运算符不兼容TS
```

```js
<ZdyTable
            get="web"
            height={config.height}
            postData={data}
            form={form}
            routerState={this.props.router}
            />
```