feat(componentEnv):优化环境配置列表查询功能

- 修改getEnvConfigList方法以支持参数对象传参- 增加环境类型和架构类型的筛选功能
- 添加选中状态管理用于筛选条件回显
- 实现根据选择的环境类型或架构类型动态查询数据
- 为Select组件添加清空功能并绑定筛选逻辑
- 更新页面UI以支持新的筛选交互方式
master
钟良源 3 months ago
parent 84cb9d6efb
commit 074934df46

@ -9,8 +9,8 @@ export function submitEnvConfig(params) {
} }
// 环境配置列表 // 环境配置列表
export function getEnvConfigList(current: string | number, size: string | number) { export function getEnvConfigList(params) {
return axios.get(`${urlPrefix}/componentDeployEnv/page?current=${current}&size=${size}`); return axios.get(`${urlPrefix}/componentDeployEnv/page`, { params });
} }
// 删除环境配置 // 删除环境配置

@ -14,6 +14,8 @@ const ComponentEnv = () => {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [editingRecord, setEditingRecord] = useState(null); const [editingRecord, setEditingRecord] = useState(null);
const [selectedEnvType, setSelectedEnvType] = useState(null); // 选中的环境类型
const [selectedArch, setSelectedArch] = useState(null); // 选中的架构类型
const columns: TableColumnProps[] = [ const columns: TableColumnProps[] = [
{ {
@ -117,8 +119,17 @@ const ComponentEnv = () => {
}); });
}; };
const getEnvList = async () => { // 获取环境列表,根据选择的类型和架构进行过滤
const res: any = await getEnvConfigList(1, 10); const getEnvList = async (extraValue?: string, type?: string) => {
// 构造查询参数
const params: any = {
current: 1,
size: 10
};
if (extraValue) params[type] = extraValue;
const res: any = await getEnvConfigList(params);
if (res.code === 200) setData(res.data.list); if (res.code === 200) setData(res.data.list);
}; };
@ -142,6 +153,12 @@ const ComponentEnv = () => {
<Select <Select
placeholder="选择环境类型" placeholder="选择环境类型"
style={{ width: 154 }} style={{ width: 154 }}
allowClear
value={selectedEnvType}
onChange={(value) => {
setSelectedEnvType(value);
getEnvList(value, 'type');
}}
> >
{envType.map((option, index) => ( {envType.map((option, index) => (
<Option key={option.id} value={option.id}> <Option key={option.id} value={option.id}>
@ -155,6 +172,12 @@ const ComponentEnv = () => {
<Select <Select
placeholder="选择架构类型" placeholder="选择架构类型"
style={{ width: 154 }} style={{ width: 154 }}
allowClear
value={selectedArch}
onChange={(value) => {
setSelectedArch(value);
getEnvList(value, 'arch');
}}
> >
{architectureType.map((option, index) => ( {architectureType.map((option, index) => (
<Option key={option} value={option}> <Option key={option} value={option}>
@ -204,3 +227,9 @@ const ComponentEnv = () => {
}; };
export default ComponentEnv; export default ComponentEnv;

Loading…
Cancel
Save