重构AppTypeTreeAsyncLoad 组件

FormInsertDiy/List/index.js

@@ -148,7 +148,7 @@ class FormList extends React.Component {
 						return false;
 					}
 					delete sear[0].required;
-					delete sear[0].placeHolder;
+					delete sear[0].placeholder;
 					searchConfig.push(sear[0]);
 				}
 			}

FormInsertDiy/ListWithAddEditTemplate/index.js

@@ -105,7 +105,7 @@ class ListWithAddEditTemplate extends React.Component {
 
 			const searchConfig = headerList.filter((i) => i.isShowQuery).map((item) => {
 				const sear = getFormArrayConfig([item]);
-				const { required, placeHolder, ...config } = sear[0];
+				const { required, placeholder, ...config } = sear[0];
 				return config;
 			});
 			this.setState({ searchConfig, primaryKey });

FormInsertDiy/config/index.js

@@ -70,7 +70,7 @@ const getFormArrayConfig = (header) => {
            key: item.name,
            name: item.title,
            type: 'input',
-           placeHolder: `请输入${item.name}`,
+           placeholder: `请输入${item.name}`,
            required: !item.isNull,
          }
        );*/
@@ -88,7 +88,7 @@ const getFormArrayConfig = (header) => {
 				key: item.name,
 				name: item.title,
 				type: 'input',
-				placeHolder: `请输入${item.name}`,
+				placeholder: `请输入${item.name}`,
 				required: !item.isNull,
 				base52: item.base52,
 			});
@@ -97,7 +97,7 @@ const getFormArrayConfig = (header) => {
 				key: item.name,
 				name: item.title,
 				type: 'inputNumber',
-				placeHolder: `请输入${item.name}`,
+				placeholder: `请输入${item.name}`,
 				required: !item.isNull,
 				min: 0,
 				base52: item.base52,
@@ -107,7 +107,7 @@ const getFormArrayConfig = (header) => {
 				key: item.name,
 				name: item.title,
 				type: 'datePicker',
-				placeHolder: `请输入${item.name}`,
+				placeholder: `请输入${item.name}`,
 				required: !item.isNull,
 				format: format[item.type],
 				base52: item.base52,
@@ -117,7 +117,7 @@ const getFormArrayConfig = (header) => {
 				key: item.name,
 				name: item.title,
 				type: 'input',
-				placeHolder: `请输入${item.name}`,
+				placeholder: `请输入${item.name}`,
 				required: !item.isNull,
 				base52: item.base52,
 			});

one_stop_public/libs/formList/config/index.js

@@ -52,7 +52,7 @@ const getFormArrayConfig = (header, isAdd, options) => {
 					key: item.name,
 					name: item.title,
 					type: 'input',
-					placeHolder: `请输入${item.name}`,
+					placeholder: `请输入${item.name}`,
 					required: !item.isNull,
 				});
 			}
@@ -68,7 +68,7 @@ const getFormArrayConfig = (header, isAdd, options) => {
 				key: item.name,
 				name: item.title,
 				type: 'select',
-				placeHolder: `请输入${item.name}`,
+				placeholder: `请输入${item.name}`,
 				required: !item.isNull,
 				options: xx,
 			});
@@ -77,7 +77,7 @@ const getFormArrayConfig = (header, isAdd, options) => {
 				key: item.name,
 				name: item.title,
 				type: 'input',
-				placeHolder: `请输入${item.name}`,
+				placeholder: `请输入${item.name}`,
 				required: !item.isNull,
 			});
 		} else if (number.indexOf(item.type) > -1) {
@@ -85,7 +85,7 @@ const getFormArrayConfig = (header, isAdd, options) => {
 				key: item.name,
 				name: item.title,
 				type: 'inputNumber',
-				placeHolder: `请输入${item.name}`,
+				placeholder: `请输入${item.name}`,
 				required: !item.isNull,
 				min: 0,
 			});
@@ -94,7 +94,7 @@ const getFormArrayConfig = (header, isAdd, options) => {
 				key: item.name,
 				name: item.title,
 				type: 'datePicker',
-				placeHolder: `请输入${item.name}`,
+				placeholder: `请输入${item.name}`,
 				required: !item.isNull,
 				format: format[item.type],
 			});
@@ -103,7 +103,7 @@ const getFormArrayConfig = (header, isAdd, options) => {
 				key: item.name,
 				name: item.title,
 				type: 'input',
-				placeHolder: `请输入${item.name}`,
+				placeholder: `请输入${item.name}`,
 				required: !item.isNull,
 			});
 		}

zyd_private/OneStopAppManage/AppTypeTree.js

@@ -14,9 +14,6 @@ import BlockTitle from '@/baseComponent/BlockTitle';
 
 const { TreeNode } = Tree;
 
-@connect(({ global }) => ({
-	sysCode: global.system.sysCode,
-}))
 export default class AppTypeTree extends Component {
 	constructor() {
 		super();
@@ -145,7 +142,7 @@ export default class AppTypeTree extends Component {
 		const { name } = this.state;
 		return (
 			<Input.Search
-				placeHolder={'应用名称搜索'}
+				placeholder={'应用名称搜索'}
 				onSearch={(value) => {
 					this.getList(value);
 				}}

zyd_private/OneStopAppManage/AppTypeTreeAsyncLoad.js

+import React, { Fragment, useEffect, useState } from 'react';
+import { Input, Tree } from 'antd';
+import Shell from '@/baseComponent/Shell';
+import BlockTitle from '@/baseComponent/BlockTitle';
+import { getListByTreeList } from '@/webPublic/Services';
+
+const { TreeNode } = Tree;
+
+
+const renderTreeNodes = data =>
+  data.map(item => {
+    if (item.children) {
+      return (
+        <TreeNode title={item.title} key={item.key} dataRef={item}>
+          {renderTreeNodes(item.children)}
+        </TreeNode>
+      );
+    }
+    return <TreeNode key={item.id} {...item} dataRef={item} />;
+  });
+
+export default function AppTypeTreeAsyncLoad(props) {
+	const { groupId, changeSearch, selectKey } = props;
+	const [treeData, setTreeData] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [name, setName] = useState(''); // 搜索应用
+
+  // useEffect(() => {
+  //   if(groupId){
+  //     setName('');
+  //   }
+  // }, [groupId]);
+
+	useEffect(
+		() => {
+			if (groupId) {
+			  setLoading(true);
+				getListByTreeList({
+					groupId,
+					name,
+				}).then((res) => {
+          setLoading(false);
+          if (res && res.length) {
+						setTreeData(res);
+						changeSearch({
+							selectKey: res[0].id + '',
+						});
+					} else {
+						setTreeData([]);
+						changeSearch({
+							selectKey: '',
+						});
+					}
+				});
+			}
+		},
+		[groupId, name],
+	);
+
+	const onSelect = (selectedKeys, info) => {
+    changeSearch({
+      selectKey: selectedKeys[0],
+    });
+  };
+
+	const inputList = () => {
+    return (
+      <Input.Search
+        placeholder={'应用名称搜索'}
+        onSearch={(value) => {
+          setName(value);
+        }}
+        style={{ marginLeft: '10px', width: '150px' }}
+      />
+    );
+  };
+
+	const onLoadData = treeNode =>
+    new Promise(resolve => {
+      if (treeNode.props.children || !treeNode.props.id) {
+        resolve();
+        return;
+      }
+      getListByTreeList({
+        groupId,
+        name,
+        parentId: treeNode.props.id,
+      }).then((res) => {
+        if(res && res.length){
+          treeNode.props.dataRef.children = res.map((g) => {
+            return {
+              title: g.title,
+              key: g.id,
+              isLeaf: g.isLeaf,
+            };
+          });
+        }
+        setTreeData([...treeData]);
+        resolve();
+      });
+    });
+
+	return (
+    <Fragment>
+      <Shell
+        styleShell={{
+          borderRight: '1px solid rgba(210,210,210,1)',
+          minHeight: document.body.clientHeight - 150,
+          backgroundColor: '#fff',
+          overflowX: 'auto',
+          marginTop: 0,
+        }}>
+        <BlockTitle title={'应用'} isSmall={true} dom={inputList()} />
+        <Tree
+          onSelect={onSelect}
+          selectedKeys={[selectKey]}
+          style={{ minHeight: '400px,' }}
+          loadData={onLoadData}
+          disabled={loading}>
+          {renderTreeNodes(treeData)}
+        </Tree>
+      </Shell>
+    </Fragment>
+  )
+}

zyd_private/OneStopAppManage/index.js

@@ -12,6 +12,7 @@ import { Row, Col } from 'antd';
 import React from 'react';
 import List from '@/highOrderComponent/List';
 import AppTypeTree from './AppTypeTree';
+import AppTypeTreeAsyncLoad from './AppTypeTreeAsyncLoad';
 import { getAppTypeList } from '@/webPublic/Services';
 import { getInfo } from '@/highOrderComponent/Service';
 
@@ -100,8 +101,8 @@ const Index = (WrappedComponent) =>
 			return (
 				<PageHeaderWrapper title="">
 					<Row>
-						<Col xl={5} xxl={4}>
-							<AppTypeTree
+						<Col xl={6} xxl={5}>
+							<AppTypeTreeAsyncLoad
 								changeSearch={this.changeSearch}
 								selectKey={search.selectKey}
 								year={search.year}
@@ -109,7 +110,7 @@ const Index = (WrappedComponent) =>
 							/>
 						</Col>
 						{search.selectKey ? (
-							<Col xl={19} xxl={20}>
+							<Col xl={18} xxl={19}>
 								<WrappedComponent
 									listConfig={pageSetting.listConfig}
 									pageButton={pageB}