|
|
|
|
@ -1,33 +1,16 @@
|
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
import styles from './style/index.module.less';
|
|
|
|
|
import { Button, Input, Modal, Radio, Space, Select } from '@arco-design/web-react';
|
|
|
|
|
import { Button, Input, Modal, Radio, Space } from '@arco-design/web-react';
|
|
|
|
|
import { IconSearch } from '@arco-design/web-react/icon';
|
|
|
|
|
import CollapseList from './collapseList';
|
|
|
|
|
import { startStatusConstant } from '@/const/isdp/componentDeploy';
|
|
|
|
|
import ConfigTutorial from '@/pages/componentDevelopment/componentEnv/configTutorial';
|
|
|
|
|
import { getComponentClassify } from '@/api/componentClassify';
|
|
|
|
|
|
|
|
|
|
const ComponentDeployment = () => {
|
|
|
|
|
const [searchKeyword, setSearchKeyword] = useState('');
|
|
|
|
|
const [debouncedKeyword, setDebouncedKeyword] = useState('');
|
|
|
|
|
const [selectedClassify, setSelectedClassify] = useState<string | undefined>(undefined);
|
|
|
|
|
const [classifyOptions, setClassifyOptions] = useState<{ label: string; value: string }[]>([]);
|
|
|
|
|
const [selectedStatus, setSelectedStatus] = useState<string | undefined>(undefined);
|
|
|
|
|
const [tutorialVisible, setTutorialVisible] = useState(false);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const timer = setTimeout(() => setDebouncedKeyword(searchKeyword), 500);
|
|
|
|
|
return () => clearTimeout(timer);
|
|
|
|
|
}, [searchKeyword]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
getComponentClassify('component').then((res: any) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
setClassifyOptions(res.data.map((item) => ({ label: item.classifyName, value: item.classifyName })));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
// 状态选项配置
|
|
|
|
|
const statusOptions = [
|
|
|
|
|
{ label: '全部', value: undefined },
|
|
|
|
|
@ -60,14 +43,6 @@ const ComponentDeployment = () => {
|
|
|
|
|
</Radio.Group>
|
|
|
|
|
|
|
|
|
|
<Space>
|
|
|
|
|
<Select
|
|
|
|
|
placeholder="组件分类"
|
|
|
|
|
allowClear
|
|
|
|
|
style={{ width: 160 }}
|
|
|
|
|
value={selectedClassify}
|
|
|
|
|
onChange={(value) => setSelectedClassify(value)}
|
|
|
|
|
options={classifyOptions}
|
|
|
|
|
/>
|
|
|
|
|
<Input
|
|
|
|
|
prefix={<IconSearch />}
|
|
|
|
|
placeholder={'搜索'}
|
|
|
|
|
@ -88,8 +63,7 @@ const ComponentDeployment = () => {
|
|
|
|
|
</Space>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles['content']}>
|
|
|
|
|
<CollapseList searchKeyword={debouncedKeyword} runStatus={selectedStatus}
|
|
|
|
|
componentClassify={selectedClassify} />
|
|
|
|
|
<CollapseList searchKeyword={searchKeyword} runStatus={selectedStatus} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|