release/3.0.1.2504.01-合并业务线

pc4mobx/hrmSalary/components/CustomSelect/index.js

@@ -8,72 +8,119 @@
   * @description:
 */
 import React, { Component } from "react";
-import { WeaLocaleProvider } from "ecCom";
+import { WeaCheckbox, WeaInput, WeaLocaleProvider, WeaNewScroll } from "ecCom";
 import classNames from "classnames";
-import { Select } from "antd";
+import { Dropdown } 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(",") : []
+      visible: false, value: props.value ? props.value.split(",") : [],
+      keywords: ""
     };
-    this.selectedData = {};
   }
 
-  componentDidMount() {
+  isAllChecked = () => {
-    const { dropdownWidth } = this.state;
+    const { options } = this.props, { value, keywords } = this.state;
-    const w = $(this.refs.customSelectMui).outerWidth();
+    let v = "0";
-    console.log($(this.refs.customSelectMui), w)
+    if (_.uniq(value).length === options.filter(k => k.showname.indexOf(keywords) >= 0).length) v = "1";
-    if (dropdownWidth < w) {
+    return v;
-      this.setState({ dropdownWidth: w });
+  };
+
+  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(","));
+  };
 
-  handleChange = (value) => {
+  onItemChange = (v, id) => {
-    this.setState({ value });
+    const { onChange, options } = this.props, { value } = this.state;
-    typeof this.props.onChange == "function" &&
+    let values = !_.isEmpty(value) ? value : [], shownames = [];
-    this.props.onChange(`${value}`);
+    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 <div className="wea-select-panel" style={style}>
+      <WeaNewScroll className="wea-select-scroll" height="100%">
+        <div className="wea-select-panel-item">
+          <WeaInput value={keywords} onChange={keywords => this.setState({ keywords })}/>
+        </div>
+        <div className="wea-select-panel-item">
+          <WeaCheckbox
+            content={"全选"}
+            value={this.isAllChecked()}
+            onChange={this.onAllChange}
+          >
+          </WeaCheckbox>
+        </div>
+        {options && options.filter(k => k.showname.indexOf(keywords) >= 0).map(o => {
+          return <div className="wea-select-panel-item">
+            <WeaCheckbox
+              content={o.showname}
+              value={this.isChecked(o.key)}
+              onChange={(v) => this.onItemChange(v, o.key)}
+            >
+            </WeaCheckbox>
+          </div>;
+        })}
+      </WeaNewScroll>
+    </div>;
+  };
+
+  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 { dropdownWidth, visible, value } = this.state;
+    const { visible } = this.state, { layout } = this.props;
-    const { options = [], defaultValue } = this.props;
     const clsname = classNames({
       "wea-associative-search-mult": true
     });
-    return (
+    return (<div className={`customMuiSelect wea-associative-search ${clsname}`} ref="customSelectMui">
-      <div className={`customMuiSelect wea-associative-search ${clsname}`} ref="customSelectMui">
+      <Dropdown trigger={["click"]} overlay={this.getList()}
-        <Select
+                onVisibleChange={visible => this.setState({ visible })} visible={visible}
-          {...this.props}
+                getPopupContainer={() => (layout || document.body)}>
-          hasScroll={false}
+        <div className="wea-select-input wdb cursor-pointer" ref="selectInput">
-          dropdownMatchSelectWidth={true}
+          <span className="wdb">{this.getShownames()}</span>
-          hideSelected={true}
+          {!this.state.visible ? <i className="icon-coms-down2 arrow"/> : <i className="icon-coms-up2 arrow"/>}
-          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>
+      </Dropdown>
-    );
+    </div>);
   }
 }
 

pc4mobx/hrmSalary/components/CustomSelect/index.less

@@ -1,19 +1,43 @@
 .customMuiSelect {
-  .ant-input-group-wrap {
+  border: none;
-    i {
+  padding: 0;
-      padding-left: 2px !important;
+
-      padding-right: 2px !important;
+  .wea-select-input {
-      padding-top: 0;
+    min-width: 100px;
-      padding-bottom: 0;
+    width: 100%;
-      line-height: 28px;
+    display: inline-block;
-      height: 28px;
+    padding: 4px 17px 4px 4px;
-      border-radius: 2px;
+    position: relative;
-      color: #333 !important;
+    min-height: 30px;
+    border: 1px solid #d9d9d9;
+    user-select: none;
+
+    &:hover, &:focus {
+      border-color: #57c5f7;
+    }
+
+    .arrow {
+      position: absolute;
+      right: 4px;
+      top: 8px;
+      color: #979797;
     }
   }
 
-  .ant-select-selection--multiple {
+}
-    max-height: 28px !important;
+
-    overflow-y: auto !important;
+.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;
+    }
   }
 }