SelectInput.jsx
3.58 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
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 * as commonUtils from "@/utils/utils";
import styles from "./selectInput.less";
import debounce from "lodash/debounce";
const SelectInput = props => {
console.log("🚀 ~ selectInputValue:", props);
const [value, setValue] = useState("");
const [values, setValues] = useState("");
const [searchValue, setSearchValue] = useState("");
const [visible, setVisible] = useState(false);
const { sId } = props.formData || {};
const { sModelsId, bCanInput, sValue } = props || {};
const [columns, setColumns] = useState([]);
const [coplyColumns, setCopyColumns] = useState(columns);
const getSqlDropDownData = async searchValue => {
const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sModelsId}&sName=${""}`;
const body = {
sSqlCondition: "",
sKeyUpFilterName: searchValue,
pageNum: 1,
pageSize: 20,
};
commonServices.postValueService(props.app.token, body, url).then(res => {
if (res.data.code === 1) {
const list = res.data.dataset.rows?.map(item => ({
label: item.sCustomerName,
value: item.sId,
}));
setColumns(list);
setCopyColumns(list);
}
});
};
const handleConfirm = () => {
const data = columns.find(item => item.value === values[0]);
setValue(data?.label || "");
setVisible(false);
};
const handleCancel = () => {
setVisible(false);
};
const searchData = async val => {
if (val === "" || val === null || val === undefined) {
setSearchValue("");
} else {
setSearchValue(val);
}
getSqlDropDownData(val);
};
// 处理选择器变化
const debouncedChangeOption = useCallback(
debounce(val => {
setValues(val);
}, 300), // 防抖时间设置为 300ms
[columns]
);
const changeOption = val => {
debouncedChangeOption(val);
};
useEffect(() => {
if (!visible) return;
getSqlDropDownData(searchValue);
}, [visible]);
useCallback;
useEffect(() => {
if (!sValue) return;
setValue(sValue)
}, [sValue]);
useCallback;
return (
<div>
<div className={styles.inputBox}>
<Input
placeholder=""
value={value}
onChange={val => {
setValue(val);
}}
/>
{!bCanInput ? (
<div className={styles.icons} onClick={() => setVisible(true)}>
<DownOutline />
</div>
) : null}
</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={changeOption} style={{ "--height": "200px", "--item-height": "2.8rem" }} />
</Popup>
</div>
);
};
export default SelectInput;