feature/3.0.1.2504.01-下拉框多选支持搜索

pc4mobx/hrmSalary/components/CustomSelect/index.js

@@ -0,0 +1,80 @@
+/*
+  *  自定义多选下拉框
+  *  支持搜索
+  * @Author:    黎永顺
+  * @Date:      2024/9/13
+  * @Wechat:
+  * @Email:     971387674@qq.com
+  * @description:
+*/
+import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
+import classNames from "classnames";
+import { Select } from "antd";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+const Option = Select.Option;
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false, dropdownWidth: 200, value: props.value ? props.value.split(",") : []
+    };
+    this.selectedData = {};
+  }
+
+  componentDidMount() {
+    const { dropdownWidth } = this.state;
+    const w = $(this.refs.customSelectMui).outerWidth();
+    console.log($(this.refs.customSelectMui), w)
+    if (dropdownWidth < w) {
+      this.setState({ dropdownWidth: w });
+    }
+  }
+
+  handleChange = (value) => {
+    this.setState({ value });
+    typeof this.props.onChange == "function" &&
+    this.props.onChange(`${value}`);
+  };
+
+  render() {
+    const { dropdownWidth, visible, value } = this.state;
+    const { options = [], defaultValue } = this.props;
+    const clsname = classNames({
+      "wea-associative-search-mult": true
+    });
+    return (
+      <div className={`customMuiSelect wea-associative-search ${clsname}`} ref="customSelectMui">
+        <Select
+          {...this.props}
+          hasScroll={false}
+          dropdownMatchSelectWidth={true}
+          hideSelected={true}
+          transitionName=""
+          animation=""
+          multiple={true}
+          notFoundContent={getLabel(111, "暂无数据")}
+          defaultActiveFirstOption={true}
+          showArrow={true}
+          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+          defaultValue={defaultValue}
+          value={value}
+          dropdownStyle={{ minWidth: dropdownWidth }}
+          onChange={this.handleChange}
+          onBlur={() => this.setState({ visible: !visible })}
+          onFocus={() => this.setState({ visible: !visible })}
+        >
+          {options.map(d => <Option key={d.key} title={d.showname}>{d.showname}</Option>)}
+        </Select>
+        <div className="ant-input-group-wrap">
+          {!visible ? <i className="icon-coms-down2 arrow"/> : <i className="icon-coms-up2 arrow"/>}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/components/CustomSelect/index.less

@@ -0,0 +1,19 @@
+.customMuiSelect {
+  .ant-input-group-wrap {
+    i {
+      padding-left: 2px !important;
+      padding-right: 2px !important;
+      padding-top: 0;
+      padding-bottom: 0;
+      line-height: 28px;
+      height: 28px;
+      border-radius: 2px;
+      color: #333 !important;
+    }
+  }
+
+  .ant-select-selection--multiple {
+    max-height: 28px !important;
+    overflow-y: auto !important;
+  }
+}