SelectInput.jsx
3.52 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
import React, { useState, useRef, useEffect, useCallback } from "react";
import { Input, Popup, Button, Toast, PickerView, SearchBar } from "antd-mobile";
import { DownOutline } from "antd-mobile-icons";
import commonConfig from "@/utils/config";
import * as commonServices from "@/services/services";
import * as commonFunc from "@/components/Common/commonFunc";
import styles from "./selectInput.less";
import debounce from "lodash/debounce";
const SelectInput = (props) => {
console.log(props, "SelectInput props");
const [value, setValue] = useState("");
const [values, setValues] = useState("");
const [searchValue, setSearchValue] = useState("");
const [visible, setVisible] = useState(false);
useEffect(() => {
// 监听滚动事件
// const data = getSqlDropDownData()
// console.log(data, "data");
}, [visible]);
const [columns, setColumns] = useState([
{ label: "选项1", value: "option1" },
{ label: "选项2", value: "option2" },
{ label: "选项3", value: "option3" },
]);
const [coplyColumns, setCopyColumns] = useState(columns);
//
const [hasMore, setHasMore] = useState(true);
const [loading, setLoading] = useState(false);
const handleConfirm = () => {
console.log(values, "values");
setValue(values);
setVisible(false);
};
const handleCancel = () => {
Toast.show("取消按钮被点击");
setVisible(false);
};
const changeInputValue = val => {
console.log(val, "val");
};
const searchData = val => {
// todo调用接口
setSearchValue(val);
const list = columns.filter(item => item.label.includes(val));
setColumns(list);
if (val === "") {
console.log(36666);
setColumns(coplyColumns);
}
};
// 处理选择器变化
const changeOption = val => {
setValues(val[0]);
};
const getSqlDropDownData = async ({ sId, sModelsId, sName }) => {
const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sModelsId}&sName=${sName}`;
const body = {
sSqlCondition: "",
sKeyUpFilterName: "",
pageNum: 1,
pageSize: 20,
};
const retrunData = await commonServices.postValueService(props.app.token, body, url);
const sColumnNameConfigStr = retrunData.data?.dataset?.rows?.[0]?.sColumnNameConfig;
return commonUtils.convertStrToObj(sColumnNameConfigStr, []);
};
return (
<div>
<div className={styles.inputBox}>
<Input
placeholder=""
value={value}
onChange={val => {
setValue(val);
}}
/>
<div className={styles.icons} onClick={() => setVisible(true)}>
<DownOutline />
</div>
</div>
<Popup visible={visible} onMaskClick={() => setVisible(false)} onClose={() => setVisible(false)} bodyStyle={{ height: "50vh" }}>
<div className={styles.popupHeader}>
<Button onClick={handleCancel} color="primary" fill="none">
取消
</Button>
<Button onClick={handleConfirm} color="primary" fill="none">
确认
</Button>
</div>
<div style={{ padding: "0 1.5rem", marginTop: "1rem" }}>
<SearchBar placeholder="请输入内容" showCancelButton value={searchValue} onChange={val => searchData(val)} />
</div>
<PickerView
columns={[columns]}
value={values}
onChange={val => changeOption(val)}
style={{ "--height": "200px", "--item-height": "2.8rem" }}
/>
</Popup>
</div>
);
};
export default SelectInput;