lu-lowcode-package-form 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +4 -0
- package/.eslintrc.js +11 -0
- package/README.md +70 -0
- package/dist/index.js +2 -0
- package/dist/index.js.LICENSE.txt +62 -0
- package/package.json +57 -0
- package/postcss.config.js +6 -0
- package/public/favicon.ico +0 -0
- package/public/index.html +43 -0
- package/public/logo192.png +0 -0
- package/public/logo512.png +0 -0
- package/public/manifest.json +25 -0
- package/public/robots.txt +3 -0
- package/src/App.css +3 -0
- package/src/App.js +41 -0
- package/src/App.test.js +8 -0
- package/src/components/field/base.jsx +16 -0
- package/src/components/field/checkbox/checkbox-tree.jsx +130 -0
- package/src/components/field/checkbox/index.jsx +14 -0
- package/src/components/field/custom/index.jsx +20 -0
- package/src/components/field/input/index.jsx +51 -0
- package/src/components/field/radio/index.jsx +13 -0
- package/src/components/field/select/index.jsx +2 -0
- package/src/components/field/select/select-props.jsx +14 -0
- package/src/components/field/select/select.jsx +39 -0
- package/src/components/field/select/tree-select.jsx +42 -0
- package/src/components/form-container/index.jsx +191 -0
- package/src/components/index.jsx +21 -0
- package/src/index.css +13 -0
- package/src/index.js +17 -0
- package/src/logo.svg +1 -0
- package/src/reportWebVitals.js +13 -0
- package/src/setupTests.js +5 -0
- package/src/utils/column-mapping.js +27 -0
- package/src/utils/index.js +186 -0
- package/tailwind.config.js +17 -0
- package/webpack.config.js +41 -0
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
Copyright (c) 2018 Jed Watson.
|
|
3
|
+
Licensed under the MIT License (MIT), see
|
|
4
|
+
http://jedwatson.github.io/classnames
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* @license
|
|
11
|
+
* Lodash <https://lodash.com/>
|
|
12
|
+
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
|
|
13
|
+
* Released under MIT license <https://lodash.com/license>
|
|
14
|
+
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
|
|
15
|
+
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* @license React
|
|
20
|
+
* react-is.production.min.js
|
|
21
|
+
*
|
|
22
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
23
|
+
*
|
|
24
|
+
* This source code is licensed under the MIT license found in the
|
|
25
|
+
* LICENSE file in the root directory of this source tree.
|
|
26
|
+
*/
|
|
27
|
+
|
|
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
|
+
/** */
|
package/package.json
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "lu-lowcode-package-form",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"dependencies": {
|
|
5
|
+
"@ant-design/icons": "^5.3.7",
|
|
6
|
+
"@testing-library/jest-dom": "^5.17.0",
|
|
7
|
+
"@testing-library/react": "^13.4.0",
|
|
8
|
+
"@testing-library/user-event": "^13.5.0",
|
|
9
|
+
"antd": "^5.18.0",
|
|
10
|
+
"react": "^17.0.0",
|
|
11
|
+
"react-dom": "^17.0.0",
|
|
12
|
+
"react-scripts": "5.0.1",
|
|
13
|
+
"web-vitals": "^2.1.4"
|
|
14
|
+
},
|
|
15
|
+
"main": "dist/index.js",
|
|
16
|
+
"module": "dist/index.esm.js",
|
|
17
|
+
"scripts": {
|
|
18
|
+
"start": "react-scripts start",
|
|
19
|
+
"build": "react-scripts build",
|
|
20
|
+
"build:package": "webpack",
|
|
21
|
+
"test": "react-scripts test",
|
|
22
|
+
"eject": "react-scripts eject"
|
|
23
|
+
},
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"react": "^17.0.0",
|
|
26
|
+
"react-dom": "^17.0.0"
|
|
27
|
+
},
|
|
28
|
+
"eslintConfig": {
|
|
29
|
+
"extends": [
|
|
30
|
+
"react-app",
|
|
31
|
+
"react-app/jest"
|
|
32
|
+
]
|
|
33
|
+
},
|
|
34
|
+
"browserslist": {
|
|
35
|
+
"production": [
|
|
36
|
+
">0.2%",
|
|
37
|
+
"not dead",
|
|
38
|
+
"not op_mini all"
|
|
39
|
+
],
|
|
40
|
+
"development": [
|
|
41
|
+
"last 1 chrome version",
|
|
42
|
+
"last 1 firefox version",
|
|
43
|
+
"last 1 safari version"
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"@babel/core": "^7.24.7",
|
|
48
|
+
"@babel/preset-env": "^7.24.7",
|
|
49
|
+
"@babel/preset-react": "^7.24.7",
|
|
50
|
+
"autoprefixer": "^10.4.19",
|
|
51
|
+
"babel-loader": "^9.1.3",
|
|
52
|
+
"postcss": "^8.4.38",
|
|
53
|
+
"tailwindcss": "^3.4.4",
|
|
54
|
+
"webpack": "^5.91.0",
|
|
55
|
+
"webpack-cli": "^5.1.4"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<meta name="theme-color" content="#000000" />
|
|
8
|
+
<meta
|
|
9
|
+
name="description"
|
|
10
|
+
content="Web site created using create-react-app"
|
|
11
|
+
/>
|
|
12
|
+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
|
13
|
+
<!--
|
|
14
|
+
manifest.json provides metadata used when your web app is installed on a
|
|
15
|
+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
16
|
+
-->
|
|
17
|
+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
18
|
+
<!--
|
|
19
|
+
Notice the use of %PUBLIC_URL% in the tags above.
|
|
20
|
+
It will be replaced with the URL of the `public` folder during the build.
|
|
21
|
+
Only files inside the `public` folder can be referenced from the HTML.
|
|
22
|
+
|
|
23
|
+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
24
|
+
work correctly both with client-side routing and a non-root public URL.
|
|
25
|
+
Learn how to configure a non-root public URL by running `npm run build`.
|
|
26
|
+
-->
|
|
27
|
+
<title>React App</title>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
31
|
+
<div id="root"></div>
|
|
32
|
+
<!--
|
|
33
|
+
This HTML file is a template.
|
|
34
|
+
If you open it directly in the browser, you will see an empty page.
|
|
35
|
+
|
|
36
|
+
You can add webfonts, meta tags, or analytics to this file.
|
|
37
|
+
The build step will place the bundled scripts into the <body> tag.
|
|
38
|
+
|
|
39
|
+
To begin the development, run `npm start` or `yarn start`.
|
|
40
|
+
To create a production bundle, use `npm run build` or `yarn build`.
|
|
41
|
+
-->
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"short_name": "React App",
|
|
3
|
+
"name": "Create React App Sample",
|
|
4
|
+
"icons": [
|
|
5
|
+
{
|
|
6
|
+
"src": "favicon.ico",
|
|
7
|
+
"sizes": "64x64 32x32 24x24 16x16",
|
|
8
|
+
"type": "image/x-icon"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"src": "logo192.png",
|
|
12
|
+
"type": "image/png",
|
|
13
|
+
"sizes": "192x192"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"src": "logo512.png",
|
|
17
|
+
"type": "image/png",
|
|
18
|
+
"sizes": "512x512"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"start_url": ".",
|
|
22
|
+
"display": "standalone",
|
|
23
|
+
"theme_color": "#000000",
|
|
24
|
+
"background_color": "#ffffff"
|
|
25
|
+
}
|
package/src/App.css
ADDED
package/src/App.js
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { FormContainer, Field } from './components';
|
|
2
|
+
import './App.css';
|
|
3
|
+
import { Button } from 'antd';
|
|
4
|
+
|
|
5
|
+
const treeData = [
|
|
6
|
+
{
|
|
7
|
+
title: '0-1',
|
|
8
|
+
key: '0-1',
|
|
9
|
+
children: [
|
|
10
|
+
{ title: '0-1-0-0', key: '0-1-0-0' },
|
|
11
|
+
{ title: '0-1-0-1', key: '0-1-0-1' },
|
|
12
|
+
{ title: '0-1-0-2', key: '0-1-0-2' },
|
|
13
|
+
],
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
title: '0-2',
|
|
17
|
+
key: '0-2',
|
|
18
|
+
},
|
|
19
|
+
];
|
|
20
|
+
|
|
21
|
+
function App() {
|
|
22
|
+
return (
|
|
23
|
+
|
|
24
|
+
<div className="App flex flex-col items-center">
|
|
25
|
+
<div className='w-[960px] rounded bg-slate-100 flex flex-col items-center pb-10'>
|
|
26
|
+
<FormContainer cols={1} className="" >
|
|
27
|
+
<Field.Input label="分组名" __id="title" />
|
|
28
|
+
|
|
29
|
+
<Field.CodeMachine label="角色编号" prompt="" __id="code" />
|
|
30
|
+
<Field.Input label="角色名称" __id="name" />
|
|
31
|
+
<Field.CheckboxTree label="角色权限" __id="permissions" addRoot={false} treeData={treeData} />
|
|
32
|
+
<Field.TextArea label="备注" __id="remark" />
|
|
33
|
+
</FormContainer>
|
|
34
|
+
<Button type="primary">Button</Button>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
</div>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export default App;
|
package/src/App.test.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export const BaseWrapper = function BaseWrapper({
|
|
2
|
+
label,
|
|
3
|
+
children,
|
|
4
|
+
prompt,
|
|
5
|
+
...otherProps
|
|
6
|
+
}) {
|
|
7
|
+
return (
|
|
8
|
+
<div className="relative">
|
|
9
|
+
{label && <div className='h-8 text-sm flex justify-between items-center'>{label}</div>}
|
|
10
|
+
<div className="w-full flex items-stretch">
|
|
11
|
+
{children}
|
|
12
|
+
</div>
|
|
13
|
+
<div className="text-xs text-gray-500 min-h-5 flex items-center">{prompt}</div>
|
|
14
|
+
</div>
|
|
15
|
+
);
|
|
16
|
+
};
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { Tree } from "antd";
|
|
2
|
+
import { BaseWrapper } from "../base.jsx"
|
|
3
|
+
import React, { useEffect, useState } from 'react';
|
|
4
|
+
import { handleTree } from "../../../utils";
|
|
5
|
+
|
|
6
|
+
// const treeData = [
|
|
7
|
+
// {
|
|
8
|
+
// title: '0-0',
|
|
9
|
+
// key: '0-0',
|
|
10
|
+
// children: [
|
|
11
|
+
// {
|
|
12
|
+
// title: '0-0-0',
|
|
13
|
+
// key: '0-0-0',
|
|
14
|
+
// children: [
|
|
15
|
+
// { title: '0-0-0-0', key: '0-0-0-0' },
|
|
16
|
+
// { title: '0-0-0-1', key: '0-0-0-1' },
|
|
17
|
+
// { title: '0-0-0-2', key: '0-0-0-2' },
|
|
18
|
+
// ],
|
|
19
|
+
// },
|
|
20
|
+
// {
|
|
21
|
+
// title: '0-0-1',
|
|
22
|
+
// key: '0-0-1',
|
|
23
|
+
// children: [
|
|
24
|
+
// { title: '0-0-1-0', key: '0-0-1-0' },
|
|
25
|
+
// { title: '0-0-1-1', key: '0-0-1-1' },
|
|
26
|
+
// { title: '0-0-1-2', key: '0-0-1-2' },
|
|
27
|
+
// ],
|
|
28
|
+
// },
|
|
29
|
+
// {
|
|
30
|
+
// title: '0-0-2',
|
|
31
|
+
// key: '0-0-2',
|
|
32
|
+
// },
|
|
33
|
+
// ],
|
|
34
|
+
// },
|
|
35
|
+
// {
|
|
36
|
+
// title: '0-1',
|
|
37
|
+
// key: '0-1',
|
|
38
|
+
// children: [
|
|
39
|
+
// { title: '0-1-0-0', key: '0-1-0-0' },
|
|
40
|
+
// { title: '0-1-0-1', key: '0-1-0-1' },
|
|
41
|
+
// { title: '0-1-0-2', key: '0-1-0-2' },
|
|
42
|
+
// ],
|
|
43
|
+
// },
|
|
44
|
+
// {
|
|
45
|
+
// title: '0-2',
|
|
46
|
+
// key: '0-2',
|
|
47
|
+
// },
|
|
48
|
+
// ];
|
|
49
|
+
|
|
50
|
+
const CheckboxTree = ({ request, value, onChange,callError,disabledValue, addRoot = true, title, ...props }) => {
|
|
51
|
+
|
|
52
|
+
const [firstLoad, setFirstLoad] = React.useState(false)
|
|
53
|
+
const [treeData, setTreeData] = React.useState([])
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
initData()
|
|
56
|
+
}, [])
|
|
57
|
+
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
console.log("CheckboxTree value ", value)
|
|
60
|
+
if ( typeof value == 'string') {
|
|
61
|
+
value = JSON.parse(value)
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
if(Array.isArray(value))
|
|
65
|
+
setCheckedKeys(value)
|
|
66
|
+
}, [value]);
|
|
67
|
+
|
|
68
|
+
const initData = async () => {
|
|
69
|
+
if (request && typeof request === 'function') {
|
|
70
|
+
const response = await request();
|
|
71
|
+
if (response.code > 0) {
|
|
72
|
+
callError && typeof callError === 'function' && callError(response.message);
|
|
73
|
+
return
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
let treeData = handleTree(response.data?.list || response.data || [], 'id', title || 'title', props?.parentId || "parentId", "children", 0, disabledValue)
|
|
77
|
+
if(addRoot) treeData = [{
|
|
78
|
+
value: 0,
|
|
79
|
+
title: '根节点',
|
|
80
|
+
children: treeData
|
|
81
|
+
}]
|
|
82
|
+
props.treeData = treeData
|
|
83
|
+
console.log("treeData",treeData)
|
|
84
|
+
setTreeData(treeData)
|
|
85
|
+
}
|
|
86
|
+
if (props.treeData) {
|
|
87
|
+
setTreeData(props.treeData)
|
|
88
|
+
}
|
|
89
|
+
setFirstLoad(true)
|
|
90
|
+
}
|
|
91
|
+
const [expandedKeys, setExpandedKeys] = useState([]);
|
|
92
|
+
const [checkedKeys, setCheckedKeys] = useState([]);
|
|
93
|
+
const [selectedKeys, setSelectedKeys] = useState([]);
|
|
94
|
+
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
|
95
|
+
|
|
96
|
+
const onExpand = (expandedKeysValue) => {
|
|
97
|
+
console.log('onExpand', expandedKeysValue);
|
|
98
|
+
setExpandedKeys(expandedKeysValue);
|
|
99
|
+
setAutoExpandParent(false);
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
const onCheck = (checkedKeysValue) => {
|
|
103
|
+
console.log('onCheck', checkedKeysValue);
|
|
104
|
+
setCheckedKeys(checkedKeysValue);
|
|
105
|
+
onChange(checkedKeysValue)
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
const onSelect = (selectedKeysValue, info) => {
|
|
109
|
+
console.log('onSelect', info);
|
|
110
|
+
setSelectedKeys(selectedKeysValue);
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
return (
|
|
114
|
+
<BaseWrapper {...props}>
|
|
115
|
+
<Tree
|
|
116
|
+
checkable
|
|
117
|
+
onExpand={onExpand}
|
|
118
|
+
onCheck={onCheck}
|
|
119
|
+
onSelect={onSelect}
|
|
120
|
+
expandedKeys={expandedKeys}
|
|
121
|
+
autoExpandParent={autoExpandParent}
|
|
122
|
+
checkedKeys={checkedKeys}
|
|
123
|
+
selectedKeys={selectedKeys}
|
|
124
|
+
treeData={treeData}
|
|
125
|
+
/>
|
|
126
|
+
</BaseWrapper>
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
export default CheckboxTree;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Checkbox as OriginalCheckbox } from 'antd';
|
|
2
|
+
import {BaseWrapper } from "../base.jsx"
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
export const Checkbox = (props) =>{
|
|
7
|
+
return (
|
|
8
|
+
<BaseWrapper {...props}>
|
|
9
|
+
<OriginalCheckbox {...props} />
|
|
10
|
+
</BaseWrapper>
|
|
11
|
+
);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export {default as CheckboxTree } from './checkbox-tree.jsx';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { forwardRef, useRef } from "react";
|
|
2
|
+
import { BaseWrapper } from "../base.jsx"
|
|
3
|
+
import { Button } from "antd";
|
|
4
|
+
|
|
5
|
+
// 只需要实现了value和onChange两个props,Form 组件就能够正常的设置值和监听值变化。
|
|
6
|
+
const Custom = forwardRef(({ value , onChange, ...props },ref)=>{
|
|
7
|
+
const test = useRef(0)
|
|
8
|
+
const onClick = ()=>{
|
|
9
|
+
test.current++
|
|
10
|
+
onChange(test.current)
|
|
11
|
+
}
|
|
12
|
+
return (
|
|
13
|
+
<BaseWrapper {...props}>
|
|
14
|
+
<div ref={ref}>form-set-value:{value}</div>
|
|
15
|
+
<Button onClick={onClick}>test</Button>
|
|
16
|
+
</BaseWrapper>
|
|
17
|
+
)
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
export default Custom
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Input as OriginalInput } from 'antd';
|
|
2
|
+
import { BaseWrapper } from "../base.jsx"
|
|
3
|
+
import React from 'react';
|
|
4
|
+
const {
|
|
5
|
+
TextArea: OriginalTextArea,
|
|
6
|
+
Password: OriginalPassword,
|
|
7
|
+
Search: OriginalSearch,
|
|
8
|
+
} = OriginalInput;
|
|
9
|
+
|
|
10
|
+
const Input = (props) =>{
|
|
11
|
+
return (
|
|
12
|
+
<BaseWrapper {...props}>
|
|
13
|
+
<OriginalInput {...props} />
|
|
14
|
+
</BaseWrapper>
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const CodeMachine = ({value,...props}) =>{
|
|
19
|
+
value = value|| "系统自动生成"
|
|
20
|
+
return (
|
|
21
|
+
<BaseWrapper {...props}>
|
|
22
|
+
<OriginalInput {...props} disabled value={value} />
|
|
23
|
+
</BaseWrapper>
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const TextArea = (props) =>{
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<BaseWrapper {...props}>
|
|
31
|
+
<OriginalTextArea {...props} />
|
|
32
|
+
</BaseWrapper>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const Password = (props) =>{
|
|
37
|
+
return (
|
|
38
|
+
<BaseWrapper {...props}>
|
|
39
|
+
<OriginalPassword {...props} />
|
|
40
|
+
</BaseWrapper>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
const Search = (props) =>{
|
|
44
|
+
return (
|
|
45
|
+
<BaseWrapper {...props}>
|
|
46
|
+
<OriginalSearch {...props} />
|
|
47
|
+
</BaseWrapper>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export {Input,TextArea,Password,Search,CodeMachine};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Select as OriginalSelect } from "antd";
|
|
2
|
+
|
|
3
|
+
import {BaseWrapper } from "../base.jsx"
|
|
4
|
+
import React from 'react';
|
|
5
|
+
|
|
6
|
+
const Select = (props) => {
|
|
7
|
+
return (
|
|
8
|
+
<BaseWrapper {...props}>
|
|
9
|
+
<OriginalSelect {...props} />
|
|
10
|
+
</BaseWrapper>
|
|
11
|
+
)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { Select } ;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { Select as OriginalSelect } from "antd";
|
|
2
|
+
|
|
3
|
+
import {BaseWrapper } from "../base"
|
|
4
|
+
import React,{useEffect,useState} from 'react';
|
|
5
|
+
|
|
6
|
+
const Select = ({ request, option_label = "label", option_value="id", disabledValue, callError, options , ...props }) => {
|
|
7
|
+
// const [firstLoad, setFirstLoad] = React.useState(false)
|
|
8
|
+
const [nOptions, setNOptions] = React.useState([])
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
initData()
|
|
11
|
+
}, [])
|
|
12
|
+
const initData = async () => {
|
|
13
|
+
if (request && typeof request === 'function') {
|
|
14
|
+
const response = await request();
|
|
15
|
+
if (response.code > 0) {
|
|
16
|
+
callError && typeof callError === 'function' && callError(response.message);
|
|
17
|
+
return
|
|
18
|
+
}
|
|
19
|
+
let list = response.data?.list || response.data
|
|
20
|
+
if (Array.isArray(list) && list.length > 0) {
|
|
21
|
+
setNOptions(list.map(item => ({ label: item[option_label], value: item[option_value] })))
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if (options && options.length > 0) {
|
|
26
|
+
setNOptions(options)
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
// setFirstLoad(true)
|
|
31
|
+
}
|
|
32
|
+
return (
|
|
33
|
+
<BaseWrapper {...props}>
|
|
34
|
+
<OriginalSelect {...props} options={nOptions} />
|
|
35
|
+
</BaseWrapper>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export default Select ;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { TreeSelect as OriginalTreeSelect } from "antd";
|
|
2
|
+
|
|
3
|
+
import { BaseWrapper } from "../base.jsx"
|
|
4
|
+
import React, { useEffect } from 'react';
|
|
5
|
+
import { handleTree } from "../../../utils";
|
|
6
|
+
import { set } from "lodash";
|
|
7
|
+
|
|
8
|
+
const TreeSelect = ({ request, title, disabledValue, callError, ...props }) => {
|
|
9
|
+
const [firstLoad, setFirstLoad] = React.useState(false)
|
|
10
|
+
const [treeData, setTreeData] = React.useState([])
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
initData()
|
|
13
|
+
}, [])
|
|
14
|
+
const initData = async () => {
|
|
15
|
+
if (request && typeof request === 'function') {
|
|
16
|
+
const response = await request();
|
|
17
|
+
if (response.code > 0) {
|
|
18
|
+
callError && typeof callError === 'function' && callError(response.message);
|
|
19
|
+
return
|
|
20
|
+
}
|
|
21
|
+
let treeData = handleTree(response.data?.list|| response.data || [], 'id', title || 'title', props.parentId || "parentId", "children", 0,disabledValue)
|
|
22
|
+
treeData = [{
|
|
23
|
+
value: 0,
|
|
24
|
+
title: '根节点',
|
|
25
|
+
children: treeData
|
|
26
|
+
}]
|
|
27
|
+
props.treeData = treeData
|
|
28
|
+
setTreeData(treeData)
|
|
29
|
+
}
|
|
30
|
+
if(props.treeData) {
|
|
31
|
+
setTreeData(props.treeData)
|
|
32
|
+
}
|
|
33
|
+
setFirstLoad(true)
|
|
34
|
+
}
|
|
35
|
+
return (
|
|
36
|
+
<BaseWrapper {...props}>
|
|
37
|
+
{firstLoad && <OriginalTreeSelect {...props} treeData={treeData} treeDefaultExpandAll />}
|
|
38
|
+
</BaseWrapper>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export default TreeSelect;
|