(value || []);
12 |
13 | const hanleAppendItem = () => {
14 | const text = 'option' + (dataSource.length + 1);
15 | setDataSource([...dataSource, { label: text, value: text }]);
16 | };
17 |
18 | const handleOptionChange = (item: any, index: any) => {
19 | setDataSource(dataSource.map((i, idx) => (idx === index ? item : i)));
20 | };
21 |
22 | const handelOptionDelete = (index: any) => {
23 | setDataSource(dataSource.filter((i, idx) => idx !== index));
24 | };
25 |
26 | React.useEffect(() => {
27 | onChange(dataSource);
28 | }, [dataSource, onChange]);
29 |
30 | const renderField = ({ value, label }: any, index: any) => {
31 | return (
32 |
33 | {
37 | handleOptionChange({ label: e.target.value, value }, index);
38 | }}
39 | value={label}
40 | style={{ width: '35%' }}
41 | >
42 | handleOptionChange({ label, value: e.target.value }, index)}
46 | value={value}
47 | style={{ width: '35%', marginLeft: 5 }}
48 | >
49 |
57 |
58 | );
59 | };
60 |
61 | return (
62 |
63 | {dataSource.map((i, index) => renderField(i, index))}
64 |
65 |
68 |
69 |
{props.children}
;
5 | };
6 |
7 | export default BasicLayout;
8 |
--------------------------------------------------------------------------------
/src/pages/__tests__/index.test.tsx:
--------------------------------------------------------------------------------
1 | import 'jest';
2 | import Index from '..';
3 | import React from 'react';
4 | import renderer, { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
5 |
6 |
7 | describe('Page: index', () => {
8 | it('Render correctly', () => {
9 | const wrapper: ReactTestRenderer = renderer.create();
10 | expect(wrapper.root.children.length).toBe(1);
11 | const outerLayer = wrapper.root.children[0] as ReactTestInstance;
12 | expect(outerLayer.type).toBe('div');
13 | expect(outerLayer.children.length).toBe(2);
14 |
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/pages/dictionary.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yzz421/form-making/c2343bada0f12abfa11bc9a2981a6b67717b93ad/src/pages/dictionary.ts
--------------------------------------------------------------------------------
/src/pages/index.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yzz421/form-making/c2343bada0f12abfa11bc9a2981a6b67717b93ad/src/pages/index.css
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Layout from './layouts/Layout';
3 | import Board from './layouts/Board';
4 | import WidgeList from './layouts/WidgeList';
5 | import { makerContext, Maker } from '@/store/Maker';
6 | import 'antd/dist/antd.css';
7 | import ConfigBlock from './layouts/FieldConfig';
8 | import { ConfigProvider } from 'antd';
9 | import zhCN from 'antd/es/locale/zh_CN';
10 |
11 | export default function() {
12 | const store = React.useRef(new Maker()).current;
13 |
14 | return (
15 |
16 |
17 | }
19 | left={}
20 | center={}
21 | >
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/pages/layouts/Board/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/es/style/themes/default.less';
2 |
3 | .container {
4 | padding: 10px 10px;
5 | overflow: auto;
6 | .board {
7 | border: 1px dashed rgba(236, 245, 255, 0.3);
8 | height: 79vh;
9 | overflow: auto;
10 | padding: 2px;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/pages/layouts/Board/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useDrop } from 'react-dnd';
3 | import { Accept } from '@/contants';
4 | import { makerContext } from '@/store/Maker';
5 | import { observer } from 'mobx-react-lite';
6 | import update from 'immutability-helper';
7 | import * as _ from 'lodash';
8 | import styles from './index.less';
9 | import * as formSv from '@/service/form';
10 | import {
11 | DatePicker,
12 | Checkbox,
13 | Switch,
14 | NumberPicker,
15 | Radio,
16 | Input,
17 | Select,
18 | } from '@formily/antd-components';
19 | import { DeleteOutlined, EyeOutlined, SmileOutlined } from '@ant-design/icons';
20 | import { Button, Divider, Modal, Table } from 'antd';
21 | import {
22 | SchemaMarkupField as Field,
23 | FormButtonGroup,
24 | Form,
25 | FormItem,
26 | Submit,
27 | registerFormFields,
28 | connect,
29 | } from '@formily/antd';
30 | import { DndInput } from '@/components/formilyExtra/DndInput';
31 |
32 | import DragWarpper from '@/components/DragWarpper';
33 | import Options from '@/components/formilyExtra/Options';
34 | import * as fdSv from '@/service/formData';
35 | import { toJS } from 'mobx';
36 |
37 | registerFormFields({
38 | DndInput: connect()(DndInput),
39 | Options: connect()(Options),
40 | });
41 |
42 | const { RangePicker } = DatePicker;
43 |
44 | const Components = {
45 | DndInput: Input,
46 | DndTextarea: Input.TextArea,
47 | DndSelect: Select,
48 | DndInputNumber: NumberPicker,
49 | DndDatePicker: DatePicker,
50 | DndCheckbox: Checkbox.Group,
51 | DndSwitch: Switch,
52 | DndRadio: Radio.Group,
53 | DndRangePicker: RangePicker,
54 | };
55 |
56 | const FormBoard = () => {
57 | const maker = React.useContext(makerContext)!;
58 |
59 | const [{ isHover }, drop] = useDrop({
60 | accept: Accept,
61 | canDrop: () => maker.isCanAppend(),
62 | collect: montior => ({ isHover: !!montior.isOver() }),
63 | drop: (item: any) => {
64 | if (item.index === undefined) {
65 | maker.appendItem(item);
66 | }
67 | },
68 | });
69 |
70 | const moveItem = React.useCallback(
71 | (dragIndex: number, hoverIndex) => {
72 | const dragItem = maker.FieldPropsList[dragIndex];
73 | maker.resetMakerItems(
74 | update(maker.FieldPropsList, {
75 | $splice: [
76 | [dragIndex, 1],
77 | [hoverIndex, 0, dragItem],
78 | ],
79 | }),
80 | );
81 | },
82 | [maker],
83 | );
84 |
85 | const [visible, setVisible] = React.useState(false);
86 | const [flVisivle, setFlVisivle] = React.useState(false);
87 | const [formList, setFormList] = React.useState([]);
88 | const [fdlVisible, setFdlVisible] = React.useState(false);
89 | const [formDataList, setFormDataList] = React.useState([]);
90 | React.useEffect(() => {
91 | loadList();
92 | }, []);
93 |
94 | React.useEffect(() => {
95 | if (maker.formId) {
96 | loadFdlist();
97 | }
98 | }, [maker.formId]);
99 |
100 | const [column, setColumn] = React.useState([]);
101 | const loadFdlist = () => {
102 | fdSv.getPaged({ pageNum: 1, pageSize: 10, formId: maker.formId! }).then(res => {
103 | console.log(toJS(maker.FieldPropsList));
104 | setColumn(
105 | maker.FieldPropsList.map(({ fieldProps }) => ({
106 | dataIndex: fieldProps.name,
107 | title: fieldProps.title,
108 | })) as any,
109 | );
110 | const ss = res.dataList.map(({ fieldList }: { fieldList: any[] }) => {
111 | let result = {} as any;
112 | fieldList.forEach(x => (result[x.componentId] = x.value));
113 | return result;
114 | });
115 | setFormDataList(ss);
116 | console.log(ss);
117 | });
118 | };
119 |
120 | const loadList = () => {
121 | formSv.getPaged({ pageNum: 1, pageSize: 10 }).then(res => setFormList(res.dataList));
122 | };
123 | return (
124 |
125 |
126 | }
129 | onClick={() => {
130 | maker.clear();
131 | }}
132 | >
133 | 清空
134 |
135 | } onClick={() => setVisible(true)}>
136 | 预览
137 |
138 |
146 |
154 |
155 |
156 |
157 |
158 |
186 |
187 |
{
195 | setVisible(false);
196 | }}
197 | >
198 |
224 |
225 |
setFdlVisible(false)}>
226 |
227 |
228 |
setFlVisivle(false)}
232 | title="表单列表"
233 | >
234 | {
240 | return (
241 | <>
242 |
254 |
255 |
258 |
259 | );
260 | },
261 | },
262 | ]}
263 | dataSource={formList}
264 | >
265 |
266 |
52 |
53 |
54 | {
61 | maker.mutePrpos(value);
62 | }}
63 | >
64 |
65 |
66 |
67 | );
68 | };
69 |
70 | export default observer(ConfigBlock);
71 |
--------------------------------------------------------------------------------
/src/pages/layouts/Layout.less:
--------------------------------------------------------------------------------
1 | @import '~antd/es/style/themes/default.less';
2 |
3 | .left {
4 | border: 1px solid @border-color-base;
5 | width: 460px;
6 | margin-right: 5px;
7 | overflow: auto;
8 | }
9 |
10 | .center {
11 | width: 100%;
12 | border: 1px solid @border-color-base;
13 | }
14 |
15 | .right {
16 | width: 480px;
17 | border: 1px solid @border-color-base;
18 | margin-left: 5px;
19 | overflow: auto;
20 | }
21 |
22 | .header {
23 | // color: hsla(0, 0%, 100%, 0.7);
24 | // background-color: #24292e;
25 | background-image: linear-gradient(90deg, #40a9ff, #e6f7ff);
26 | height: 46px;
27 | bottom: 1px solid @border-color-base;
28 | margin-bottom: 12px;
29 | color: whitesmoke;
30 | align-items: center;
31 | line-height: 46px;
32 | }
33 |
--------------------------------------------------------------------------------
/src/pages/layouts/Layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Row, Col, Divider, Button, Modal } from 'antd';
3 | import { DndContext, DndProvider } from 'react-dnd';
4 | import Backend from 'react-dnd-html5-backend';
5 | import { SaveOutlined } from '@ant-design/icons';
6 | import styles from './Layout.less';
7 | import { makerContext } from '@/store/Maker';
8 | import SchemaForm, { createAsyncFormActions, SchemaMarkupField as Field } from '@formily/antd';
9 |
10 | interface Props {
11 | left: React.ReactNode;
12 | center: React.ReactNode;
13 | right: React.ReactNode;
14 | }
15 |
16 | const Layout: React.SFC = props => {
17 | const maker = React.useContext(makerContext)!;
18 | const { left, center, right } = props;
19 | const [visible, setVisible] = React.useState(false);
20 | const actions = React.useRef(createAsyncFormActions()).current;
21 | return (
22 |
23 |
24 |
25 |
33 | 未命名表单
34 |
35 |
36 |
37 | }
39 | shape="round"
40 | type="primary"
41 | onClick={() => {
42 | maker.saveFormData();
43 | }}
44 | >
45 | 保存
46 |
47 |
48 |
49 |
51 |
52 |
{left}
53 |
{center}
54 |
{right}
55 |
56 |
18 |
19 |
20 | {Widges.map((x, index) => (
21 |
22 | ))}
23 |
24 |
25 |
26 | );
27 | };
28 |
29 | export default WidgeList;
30 |
--------------------------------------------------------------------------------
/src/schemajson.ts:
--------------------------------------------------------------------------------
1 | export const BASE = {
2 | type: 'object',
3 | properties: {
4 | title: {
5 | title: '标题',
6 | type: 'string',
7 | },
8 | placeholder: {
9 | title: '占位内容',
10 | type: 'string',
11 | },
12 | require: {
13 | title: '必填',
14 | type: 'Switch',
15 | },
16 | disabled: {
17 | title: '禁用',
18 | type: 'Switch',
19 | },
20 | },
21 | };
22 |
23 | export const DndInput = {
24 | type: 'object',
25 | properties: {
26 | title: {
27 | title: '标题',
28 | type: 'string',
29 | },
30 | placeholder: {
31 | title: '占位内容',
32 | type: 'string',
33 | },
34 | required: {
35 | title: '必填',
36 | type: 'Switch',
37 | },
38 | disabled: {
39 | title: '禁用',
40 | type: 'Switch',
41 | },
42 | },
43 | };
44 |
45 | export const DndDatePicker = {
46 | type: 'object',
47 | properties: {
48 | title: {
49 | title: '标题',
50 | type: 'string',
51 | },
52 | placeholder: {
53 | title: '占位内容',
54 | type: 'string',
55 | },
56 | required: {
57 | title: '必填',
58 | type: 'Switch',
59 | },
60 | disabled: {
61 | title: '禁用',
62 | type: 'Switch',
63 | },
64 | },
65 | };
66 |
67 | export const DndInputNumber = {
68 | type: 'object',
69 | properties: {
70 | title: {
71 | title: '标题',
72 | type: 'string',
73 | },
74 | placeholder: {
75 | title: '占位内容',
76 | type: 'string',
77 | },
78 | required: {
79 | title: '必填',
80 | type: 'Switch',
81 | },
82 | disabled: {
83 | title: '禁用',
84 | type: 'Switch',
85 | },
86 | },
87 | };
88 |
89 | export const DndTextarea = {
90 | type: 'object',
91 | properties: {
92 | title: {
93 | title: '标题',
94 | type: 'string',
95 | },
96 | placeholder: {
97 | title: '占位内容',
98 | type: 'string',
99 | },
100 | required: {
101 | title: '必填',
102 | type: 'Switch',
103 | },
104 | disabled: {
105 | title: '禁用',
106 | type: 'Switch',
107 | },
108 | },
109 | };
110 |
111 | export const DndSelect = {
112 | type: 'object',
113 | properties: {
114 | title: {
115 | title: '标题',
116 | type: 'string',
117 | },
118 | placeholder: {
119 | title: '占位内容',
120 | type: 'string',
121 | },
122 | required: {
123 | title: '必填',
124 | type: 'Switch',
125 | },
126 | disabled: {
127 | title: '禁用',
128 | type: 'Switch',
129 | },
130 | enum: {
131 | title: '简单数据',
132 | type: 'Options',
133 | },
134 | },
135 | };
136 |
137 | export const DndCheckbox = {
138 | type: 'object',
139 | properties: {
140 | title: {
141 | title: '标题',
142 | type: 'string',
143 | },
144 | placeholder: {
145 | title: '占位内容',
146 | type: 'string',
147 | },
148 | required: {
149 | title: '必填',
150 | type: 'Switch',
151 | },
152 | disabled: {
153 | title: '禁用',
154 | type: 'Switch',
155 | },
156 | enum: {
157 | title: '简单数据',
158 | type: 'Options',
159 | },
160 | },
161 | };
162 |
163 | export const DndRadio = {
164 | type: 'object',
165 | properties: {
166 | title: {
167 | title: '标题',
168 | type: 'string',
169 | },
170 | placeholder: {
171 | title: '占位内容',
172 | type: 'string',
173 | },
174 | required: {
175 | title: '必填',
176 | type: 'Switch',
177 | },
178 | disabled: {
179 | title: '禁用',
180 | type: 'Switch',
181 | },
182 | enum: {
183 | title: '简单数据',
184 | type: 'Options',
185 | },
186 | },
187 | };
188 |
189 | export const DndSwitch = {
190 | type: 'object',
191 | properties: {
192 | title: {
193 | title: '标题',
194 | type: 'string',
195 | },
196 | required: {
197 | title: '必填',
198 | type: 'Switch',
199 | },
200 | disabled: {
201 | title: '禁用',
202 | type: 'Switch',
203 | },
204 | },
205 | };
206 |
207 | export const DndRangePicker = {
208 | type: 'object',
209 | properties: {
210 | title: {
211 | title: '标题',
212 | type: 'string',
213 | },
214 | required: {
215 | title: '必填',
216 | type: 'Switch',
217 | },
218 | disabled: {
219 | title: '禁用',
220 | type: 'Switch',
221 | },
222 | },
223 | };
224 |
--------------------------------------------------------------------------------
/src/service/data.d.ts:
--------------------------------------------------------------------------------
1 | interface FMComponent {
2 | id?: string;
3 | name?: string;
4 | type?: string;
5 | }
6 |
7 | interface FMFieldList {
8 | componentId?: string;
9 | value?: string | number;
10 | }
11 |
12 | interface FormEntity {
13 | addUserId?: string;
14 | componentList?: FMComponent[];
15 | name?: string;
16 | style?: string;
17 | remark?: string;
18 | }
19 |
20 | interface IPagenationParams {
21 | pageNum: number;
22 | pageSize: number;
23 | }
24 |
25 | interface FMFormData {
26 | addUserId?: string;
27 | fieldList?: FMFieldList[];
28 | formId?: string;
29 | }
30 |
--------------------------------------------------------------------------------
/src/service/form.ts:
--------------------------------------------------------------------------------
1 | import request from '@/utils/request';
2 |
3 | export async function add(data: FormEntity) {
4 | return request('/form', { method: 'post', data: data });
5 | }
6 |
7 | export async function getById(formId: string) {
8 | return request(`/form/${formId}`);
9 | }
10 |
11 | export async function update(data: FormEntity) {
12 | return request('/form', { method: 'put', data });
13 | }
14 |
15 | export async function deleteById(formId: string) {
16 | return request(`/form/${formId}`, { method: 'delete' });
17 | }
18 |
19 | export async function getPaged(params: IPagenationParams) {
20 | return request(`/form`, { params });
21 | }
22 |
23 | export async function submit(data: FMFormData) {
24 | return request(`/form/data`, { method: 'post', data });
25 | }
26 |
--------------------------------------------------------------------------------
/src/service/formData.ts:
--------------------------------------------------------------------------------
1 | import request from '@/utils/request';
2 |
3 | interface PaginationParams extends IPagenationParams {
4 | formId: string;
5 | }
6 |
7 | export async function getPaged(params: PaginationParams) {
8 | return request(`/form/data`, { method: 'get', params });
9 | }
10 |
--------------------------------------------------------------------------------
/src/store/Maker.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observable, action, toJS, autorun } from 'mobx';
3 | import uuid, { v4 as uuidv4 } from 'uuid';
4 | import * as _ from 'lodash';
5 | import * as formSv from '@/service/form';
6 | import { message } from 'antd';
7 | import { getGUID } from '@/utils/utils';
8 |
9 | export interface MakerItemProps {
10 | label: string;
11 | required?: boolean;
12 | placeholder?: string;
13 | disabled?: boolean;
14 | default?: string | number; //默认值
15 | datePicker?: string; //时间选择器类型
16 | }
17 |
18 | interface Target {
19 | data?: any;
20 | index: number;
21 | }
22 |
23 | export class Maker {
24 | @observable FieldPropsList: any[] = [];
25 | @observable MakerItems: [] = [];
26 | @observable target: Target | undefined = undefined;
27 |
28 | @observable selected: any | undefined = undefined;
29 |
30 | @observable formId: string | undefined = undefined;
31 |
32 | constructor() {}
33 |
34 | @action
35 | resetFormId = (formId?: string) => {
36 | this.formId = formId;
37 | };
38 |
39 | @action
40 | submitFormData = (data: { [key: string]: string }) => {
41 | const fieldList: FMFieldList[] = [];
42 | Object.keys(data).forEach(key =>
43 | fieldList.push({ componentId: key, value: JSON.stringify(data[key]) }),
44 | );
45 | console.log(fieldList);
46 | const formData: FMFormData = {
47 | addUserId: '123',
48 | fieldList,
49 | formId: this.formId,
50 | };
51 | return formSv.submit(formData).then(this.resetFormId);
52 | };
53 |
54 | @action
55 | appendItem(item: any) {
56 | item.fieldProps.name = getGUID();
57 | this.FieldPropsList.push(item);
58 | }
59 |
60 | @action
61 | isCanAppend() {
62 | return this.target === undefined;
63 | }
64 |
65 | @action
66 | resetTarget(t: Target | undefined) {
67 | this.target = t;
68 | }
69 |
70 | @action
71 | resetMakerItems(makerItems: any[]) {
72 | this.FieldPropsList = makerItems;
73 | }
74 |
75 | @action
76 | deleteMakerItemById = (uuid: string) => {
77 | this.FieldPropsList = this.FieldPropsList.filter(({ fieldProps }) => fieldProps.name !== uuid);
78 | };
79 |
80 | @action
81 | resetSelected = (item: any) => {
82 | this.selected = item;
83 | };
84 |
85 | @action
86 | isSelected = (item: any) => {
87 | return this.selected?.name === item.name;
88 | };
89 |
90 | @action
91 | mutePrpos = (props: MakerItemProps) => {
92 | if (!!this.selected)
93 | this.FieldPropsList = this.FieldPropsList.map(x => {
94 | if (x.fieldProps.name === this.selected?.fieldProps.name) {
95 | return { ...x, fieldProps: props };
96 | }
97 | return x;
98 | }) as any;
99 | };
100 |
101 | @action
102 | addCopy = () => {
103 | let clone = _.cloneDeep(this.selected);
104 | clone.fieldProps.name = uuidv4();
105 | this.FieldPropsList.push(clone!);
106 | };
107 |
108 | @action
109 | clear = () => {
110 | this.FieldPropsList = [];
111 | };
112 |
113 | @action
114 | getSchema = () => {
115 | if (!!this.FieldPropsList && this.FieldPropsList.length === 0) {
116 | return undefined;
117 | }
118 |
119 | let result = {
120 | type: 'object',
121 | properties: {} as any,
122 | };
123 |
124 | this.FieldPropsList.forEach(
125 | ({ fieldProps }) => (result.properties[fieldProps.name] = { ...fieldProps }),
126 | );
127 | return result;
128 | };
129 |
130 | @action
131 | getDndSchema = () => {
132 | if (!!this.FieldPropsList && this.FieldPropsList.length === 0) {
133 | return undefined;
134 | }
135 |
136 | let result = {
137 | type: 'object',
138 | properties: {} as any,
139 | };
140 |
141 | return result;
142 | };
143 | @action
144 | saveFormData = (name?: string) => {
145 | const componentList: FMComponent[] = this.FieldPropsList.map(({ fieldProps, type }) => ({
146 | id: fieldProps.name,
147 | name: fieldProps.title,
148 | type: type,
149 | }));
150 | const formEntity: FormEntity = {
151 | addUserId: '123',
152 | componentList,
153 | name: name || getGUID(),
154 | style: JSON.stringify(this.FieldPropsList),
155 | remark: 'remark',
156 | };
157 |
158 | return formSv.add(formEntity).then(() => message.success('成功'));
159 | };
160 | }
161 |
162 | export const makerContext = React.createContext(null);
163 |
--------------------------------------------------------------------------------
/src/store/data.d.ts:
--------------------------------------------------------------------------------
1 | interface BasicProps {
2 | required?: boolean;
3 | disabled?: boolean;
4 | label?: string;
5 | placeholder?: string;
6 | readonly?: string;
7 | default?: string | any;
8 | }
9 |
10 | interface DatePickerProps extends BasicProps {
11 | picker?: string;
12 | format?: string; //日期格式 默认 yyyy-MM-dd
13 | timestamp?: boolean; //是否获取时间戳
14 | }
15 |
16 | interface SelectProps extends BasicProps {
17 | mode: string;
18 | enum: any[];
19 | }
20 |
--------------------------------------------------------------------------------
/src/utils/data.d.ts:
--------------------------------------------------------------------------------
1 | interface IWidge {
2 | icon: string;
3 | label: string;
4 | type: string;
5 | fieldProps: any;
6 | }
7 |
--------------------------------------------------------------------------------
/src/utils/request.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * request 网络请求工具
3 | * 更详细的 api 文档: https://github.com/umijs/umi-request
4 | */
5 | import { extend, RequestOptionsInit } from 'umi-request';
6 | import { notification } from 'antd';
7 | import { router } from 'umi';
8 |
9 | const codeMessage = {
10 | 200: '服务器成功返回请求的数据。',
11 | 201: '新建或修改数据成功。',
12 | // 201: '服务器错误',
13 | 202: '一个请求已经进入后台排队（异步任务）。',
14 | 204: '删除数据成功。',
15 | 400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
16 | 401: '用户没有权限（令牌、用户名、密码错误）。',
17 | 403: '用户得到授权，但是访问是被禁止的。',
18 | 404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
19 | 406: '请求的格式不可得。',
20 | 410: '请求的资源被永久删除，且不会再得到的。',
21 | 422: '当创建一个对象时，发生一个验证错误。',
22 | 500: '服务器发生错误，请检查服务器。',
23 | 502: '网关错误。',
24 | 503: '服务不可用，服务器暂时过载或维护。',
25 | 504: '网关超时。',
26 | };
27 |
28 | /**
29 | * 异常处理程序
30 | */
31 | const errorHandler = (error: { response: Response }): Response => {
32 | const { response } = error;
33 | if (response && response.status) {
34 | const errorText = (codeMessage as any)[response.status] || response.statusText;
35 | const { status, url } = response;
36 | notification.error({
37 | message: `请求错误 ${status}: ${url}`,
38 | description: errorText,
39 | });
40 | }
41 | return response;
42 | };
43 |
44 | // export const prefix =
45 | // process.env.NODE_ENV === 'development' ? '' : 'http://47.104.131.14/digitcons/v1';
46 |
47 | export const prefix = 'http://47.104.131.14/wisdomsite/v1';
48 | // export const prefix = 'http://39.104.81.4/wisdomsite/v1'
49 |
50 | // export const prefix = 'http://www.lanlan.live:8085/wisdomsite/v1'
51 | /**
52 | * 配置request请求时的默认参数
53 | */
54 | export const urequest = extend({
55 | prefix: prefix,
56 | errorHandler, // 默认错误处理
57 | credentials: 'include', // 默认请求是否带上cookie
58 | });
59 |
60 | export const request = (url: string, options?: RequestOptionsInit) => {
61 | return new Promise(async (resolve, reject) => {
62 | const res = await urequest(url, options);
63 | if (res === null) {
64 | reject('未知错误');
65 | return;
66 | }
67 | const error = handleStatusError(res.status, url, res.message);
68 |
69 | if (error) reject(error);
70 |
71 | const boxingRes = boxingResponse(res);
72 | resolve(boxingRes);
73 | }).catch(error => {
74 | throw error;
75 | });
76 | };
77 |
78 | const handleStatusError = (status: number, url?: string, msg?: string): string | undefined => {
79 | const errorConfig = (BACKENDSTATUSERRORCONFIG as any)[status] || undefined;
80 | if (Array.isArray(errorConfig)) {
81 | const [defaultMsg, fn] = errorConfig;
82 | if (typeof fn === 'function') {
83 | fn(msg || defaultMsg, url);
84 | }
85 | return msg;
86 | }
87 |
88 | return errorConfig;
89 | };
90 |
91 | const boxingResponse = (res: any) => {
92 | const data = res.data;
93 | if (data && data.pageTool) {
94 | const pageTool = data.pageTool;
95 | return {
96 | dataList: data.beanList || [],
97 | meta: {
98 | pageNum: pageTool.pageNum,
99 | pageSize: pageTool.pageTool,
100 | total: pageTool.totalSize,
101 | },
102 | };
103 | }
104 | return res;
105 | };
106 |
107 | const BACKENDSTATUSERRORCONFIG = {
108 | 125: [
109 | 'token error!',
110 | () => {
111 | router.push('/user/login');
112 | },
113 | ],
114 | 201: [
115 | '后台服务器异常请查阅日志!',
116 | (errorText: string, url: string) => {
117 | notification.error({
118 | message: `请求错误 ${status}: ${url}`,
119 | description: errorText,
120 | });
121 | },
122 | ],
123 | 116: [
124 | '项目进度id不能为空',
125 | (errorText: string, url: string) => {
126 | notification.error({
127 | message: `请求错误 ${status}: ${url}`,
128 | description: errorText,
129 | });
130 | },
131 | ],
132 | 121: [
133 | '',
134 | (errorText: string, url: string) => {
135 | notification.error({
136 | message: `请求错误 ${status}: ${url}`,
137 | description: errorText,
138 | });
139 | },
140 | ],
141 | 10: ['', ''],
142 | };
143 |
144 | // 中间件，对请求前、响应后做处理
145 | urequest.use(async (ctx, next) => {
146 | const { req } = ctx;
147 |
148 | req.options.headers = {
149 | auth_token: 'd7dda732508242669ba1c1506935b1e8',
150 | };
151 |
152 | await next();
153 | const { res } = ctx;
154 |
155 | // if (process.env.NODE_ENV === 'development') {
156 | // console.log(`API: ${req.url.replace(prefix, '')} \r\n返回的数据: `, res.data, ' \r\n');
157 | // console.log(`\r\n`);
158 | // }
159 | });
160 |
161 | export default request;
162 |
--------------------------------------------------------------------------------
/src/utils/utils.ts:
--------------------------------------------------------------------------------
1 | import { v4 as uuidV4 } from 'uuid';
2 | export const getItemStyle = (isDragging: any, draggableStyle: any) => ({
3 | // some basic styles to make the items look a bit nicer
4 | // userSelect: 'none',
5 |
6 | // change background colour if dragging
7 | // background: isDragging ? 'lightgreen' : 'red',
8 |
9 | // styles we need to apply on draggables
10 | ...draggableStyle,
11 | });
12 |
13 | export const getListStyle = (isDraggingOver: any) => ({
14 | // background: isDraggingOver ? 'lightblue' : 'grey',
15 | });
16 |
17 | export const getGUID = () => {
18 | return uuidV4().replace(/-/g, '');
19 | };
20 |
--------------------------------------------------------------------------------
/src/widge.ts:
--------------------------------------------------------------------------------
1 | import { ItemTypes } from './contants';
2 | import { getGUID } from './utils/utils';
3 |
4 | export const Widges = [
5 | {
6 | label: '单行文本',
7 | type: ItemTypes.INPUT,
8 | icon: 'anticoninput',
9 | fieldProps: {
10 | 'x-component': 'string',
11 | title: '单行文本',
12 | },
13 | },
14 | {
15 | label: '数字输入框',
16 | type: ItemTypes.INPUTNUMBER,
17 | icon: 'anticonfuhao-shuzishurukuang',
18 | fieldProps: {
19 | 'x-component': 'NumberPicker',
20 | title: '数字输入框',
21 | },
22 | },
23 | {
24 | label: '多行文本',
25 | type: ItemTypes.TEXTAREA,
26 | icon: 'anticontextareabt_back',
27 | uuid: getGUID(),
28 | fieldProps: {
29 | 'x-component': 'textarea',
30 | title: '多行文本',
31 | },
32 | },
33 | {
34 | label: '下拉选择器',
35 | type: ItemTypes.SELECT,
36 | icon: 'anticondrop-down',
37 | uuid: getGUID(),
38 | fieldProps: {
39 | 'x-component': 'string',
40 | title: '下拉选择器',
41 | enum: [{ label: 'option1', value: 'option1' }],
42 | },
43 | },
44 | {
45 | label: '日期选择器',
46 | type: ItemTypes.DATEPICKER,
47 | icon: 'anticonmdatepicker',
48 | uuid: getGUID(),
49 | fieldProps: {
50 | type: 'daterange',
51 | title: '日期选择器',
52 | picker: 'date',
53 | },
54 | },
55 | {
56 | label: '日期范围选择',
57 | type: ItemTypes.RANGPICKER,
58 | icon: 'anticonmdatepicker',
59 | uuid: getGUID(),
60 | fieldProps: {
61 | type: 'RangePicker',
62 | title: '日期范围选择器',
63 | picker: 'date',
64 | },
65 | },
66 | {
67 | label: '多选框',
68 | type: ItemTypes.CHECKBOX,
69 | icon: 'anticonduoxuankuang',
70 | uuid: getGUID(),
71 | fieldProps: {
72 | 'x-component': 'CheckboxGroup',
73 | title: '多选框',
74 | enum: [
75 | { label: 'One', value: '1' },
76 | { label: 'Two', value: '2' },
77 | { label: 'Three', value: '3' },
78 | { label: 'Four', value: '4' },
79 | ],
80 | },
81 | },
82 | {
83 | label: '单选框',
84 | type: ItemTypes.RADIO,
85 | icon: 'anticondanxuankuangxuanzhong',
86 | uuid: getGUID(),
87 | fieldProps: {
88 | 'x-component': 'RadioGroup',
89 | title: '单选框',
90 | enum: [
91 | { label: 'One', value: '1' },
92 | { label: 'Two', value: '2' },
93 | { label: 'Three', value: '3' },
94 | { label: 'Four', value: '4' },
95 | ],
96 | },
97 | },
98 | {
99 | label: '开关按钮',
100 | type: ItemTypes.SWITCH,
101 | icon: 'anticonkaiguananniu',
102 | uuid: getGUID(),
103 | fieldProps: {
104 | 'x-component': 'Switch',
105 | title: '开关按钮',
106 | },
107 | },
108 | ];
109 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "esnext",
5 | "moduleResolution": "node",
6 | "lib": ["dom", "dom.iterable", "esnext"],
7 | "skipLibCheck": true,
8 | "importHelpers": true,
9 | "jsx": "react",
10 | "esModuleInterop": true,
11 | "sourceMap": true,
12 | "baseUrl": ".",
13 | "strict": true,
14 | "experimentalDecorators": true,
15 | "emitDecoratorMetadata": true,
16 | "paths": {
17 | "@/*": ["src/*"],
18 | "@tmp/*": ["src/pages/.umi/*"],
19 | "@@/*": ["src/.umi/*"]
20 | },
21 | "allowSyntheticDefaultImports": true
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css';
2 | declare module '*.png';
3 | declare module '*.less';
4 |
--------------------------------------------------------------------------------