index.jsx
4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React, { useEffect, useState } from "react";
import { history } from "umi";
import { SideBar } from "antd-mobile";
import styles from "./index.less";
import Icon5 from "@/assets/mobile/20.png";
import commonConfig from "@/utils/config";
import * as commonServices from "@/services/services";
import quotation from "@/routes/mobile/quotation";
const QuotationAllprogress = baseProps => {
const { sModelsId } = baseProps;
const { token } = baseProps.app;
const [state, setState] = useState(null);
const [selectedKey, setSelectedKey] = useState(null);
const { treeDataList } = baseProps.state || {};
const getQuotationList = async () => {
const configDataId = "172129113112117428019180410";
const formSrcRoute = "";
const condition = {
bFilter: [],
pageNum: 1,
pageSize: 1000,
};
const dataUrl = `${commonConfig.server_host}filterTree/getFilterTree/${configDataId}?sModelsId=${sModelsId}&sName=${formSrcRoute}`;
const dataReturn = (await commonServices.postValueService(token, condition, dataUrl)).data;
const treeDataList = dataReturn.dataset.rows[0].children.map(item => {
return item;
});
setState(pre => ({ ...pre, treeDataList }));
// setSelectedKey(treeDataList[0].sId); // 默认选中第一条
};
// 172129113112117428019180410
useEffect(() => {
getQuotationList();
}, [sModelsId]);
const treeProps = {
...baseProps,
state,
selectedKey,
setState,
};
return (
<div className={styles.quotationBox}>
<div className={styles.quotationNavigation}>
<TreeComponent {...treeProps} />
</div>
<div className={styles.quotationContent}>
<ContentComponent {...treeProps} />
</div>
</div>
);
};
// 侧边导航
const TreeComponent = props => {
const { treeDataList, selectedKey } = props.state || {};
const { setState } = props;
useEffect(() => {
if (treeDataList && treeDataList.length) {
const list = treeDataList.find(item => item.sId === treeDataList[0].sId);
if (list && list.children && list.children.length) {
// 如果有子节点，则取子节点的名称
setState(pre => ({
...pre,
selectedKey: treeDataList[0].sId,
contentList: list.children.map(child => {
return child;
}),
}));
}
}
}, [treeDataList]);
return treeDataList && treeDataList.length ? (
<SideBar
selectedKeys={[selectedKey]} // 设置默认选中项
onChange={key => {
const list = treeDataList.find(item => item.sId === key);
if (list && list.children && list.children.length) {
// 如果有子节点，则取子节点的名称
setState(pre => ({
...pre,
selectedKey: key,
contentList: list.children.map(child => {
return child;
}),
}));
}
}}
>
{treeDataList && treeDataList.length
? treeDataList.map(item => <SideBar.Item key={item.sId} title={item.showName} style={{ background: "#EBF2FD" }} />)
: ""}
</SideBar>
) : (
""
);
};
// 内容
const ContentComponent = props => {
const { contentList = [] } = props.state || {};
// 路由
const handleGridClick = item => () => {
console.log(item, props, "handleGridClick");
console.log(props.dispatch, "handleGridClick");
props.dispatch({
type: "content/onRouterMobile",
payload: {
url: "/indexMobile/quotationDetail" /* 接口地址 */,
urlKey: undefined,
sModelsId: props.sModelsId,
sModelType: props.sModelType,
quotationData: item
},
});
};
return (
<div className={styles.content}>
{contentList.map(item => (
<div key={item.key} className={styles.contentItem} onClick={handleGridClick(item)}>
<img src={Icon5} alt="" className={styles.contentItemImg} />
<span className={styles.contentItemTitle}>{item.showName}</span>
</div>
))}
</div>
);
};
export default QuotationAllprogress;