diff --git a/pc4mobx/hrmSalary/components/CustomSelect/index.js b/pc4mobx/hrmSalary/components/CustomSelect/index.js new file mode 100644 index 00000000..43068096 --- /dev/null +++ b/pc4mobx/hrmSalary/components/CustomSelect/index.js @@ -0,0 +1,127 @@ +/* + * 自定义多选下拉框 + * 支持搜索 + * @Author: 黎永顺 + * @Date: 2024/9/13 + * @Wechat: + * @Email: 971387674@qq.com + * @description: +*/ +import React, { Component } from "react"; +import { WeaCheckbox, WeaInput, WeaLocaleProvider, WeaNewScroll } from "ecCom"; +import classNames from "classnames"; +import { Dropdown } from "antd"; +import "./index.less"; + +const getLabel = WeaLocaleProvider.getLabel; + +class Index extends Component { + constructor(props) { + super(props); + this.state = { + visible: false, value: props.value ? props.value.split(",") : [], + keywords: "" + }; + } + + isAllChecked = () => { + const { options } = this.props, { value, keywords } = this.state; + let v = "0"; + if (_.uniq(value).length === options.filter(k => k.showname.indexOf(keywords) >= 0).length) v = "1"; + return v; + }; + + isChecked = (v) => { + const { value } = this.state; + return value.indexOf(v) > -1 ? "1" : "0"; + }; + onAllChange = (v) => { + const { options, onChange } = this.props, { keywords } = this.state; + let values = [], shownames = []; + if (v == 1) { + options.filter(k => k.showname.indexOf(keywords) >= 0).forEach(o => { + values.push(o.key); + shownames.push(o.showname); + }); + } + this.setState({ value: values }); + onChange && onChange(values.join(","), shownames.join(",")); + }; + + onItemChange = (v, id) => { + const { onChange, options } = this.props, { value } = this.state; + let values = !_.isEmpty(value) ? value : [], shownames = []; + if (v == "1") { + values.push(id); + } else { + values = values.filter(val => val !== id); + } + values.forEach(val => { + let target = options.filter((data) => data.key == val)[0]; + if (target) shownames.push(target.showname); + }); + this.setState({ value: values }); + onChange && onChange(values.join(","), shownames.join(",")); + }; + + getList = () => { + const { options } = this.props, { keywords } = this.state; + let style = {}; + if (options.length > 5) style = { height: 200 }; + return
+ +
+ this.setState({ keywords })}/> +
+
+ + +
+ {options && options.filter(k => k.showname.indexOf(keywords) >= 0).map(o => { + return
+ this.onItemChange(v, o.key)} + > + +
; + })} +
+
; + }; + + getShownames = () => { + const { options } = this.props; + let { value } = this.state; + let shownames = []; + value.forEach(val => { + let target = options.filter((data) => data.key == val)[0]; + if (target) shownames.push(target.showname); + }); + return shownames.join(","); + }; + + render() { + const { visible } = this.state, { layout } = this.props; + const clsname = classNames({ + "wea-associative-search-mult": true + }); + return (
+ this.setState({ visible })} visible={visible} + getPopupContainer={() => (layout || document.body)}> +
+ {this.getShownames()} + {!this.state.visible ? : } +
+
+
); + } +} + +export default Index; \ No newline at end of file diff --git a/pc4mobx/hrmSalary/components/CustomSelect/index.less b/pc4mobx/hrmSalary/components/CustomSelect/index.less new file mode 100644 index 00000000..1ce20fb4 --- /dev/null +++ b/pc4mobx/hrmSalary/components/CustomSelect/index.less @@ -0,0 +1,60 @@ +.customMuiSelect { + border: none; + padding: 0; + + .wea-select-input { + min-width: 100px; + width: 100%; + display: inline-block; + padding: 4px 17px 4px 4px; + position: relative; + min-height: 30px; + border: 1px solid #d9d9d9; + user-select: none; + height: 30px; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; + + .wdb { + word-break: break-all !important; + word-wrap: break-word !important; + } + + .cursor-pointer { + cursor: pointer; + } + + &:hover, &:focus { + border-color: #57c5f7; + } + + .arrow { + position: absolute; + right: 4px; + top: 8px; + color: #979797; + } + } + +} + +.wea-select-panel { + padding: 5px 0; + max-height: 200px; + border-radius: 3px; + background: #fff; + border: 1px solid #ddd; + + .wea-select-panel-item { + padding: 5px 10px; + + &:hover { + background-color: #e9f7ff; + } + } +} \ No newline at end of file