Merge branch 'release/3.0.1.2504.01-合并业务线' into release/2.19.1.2503.01-业务线个税

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 <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 { visible } = this.state, { layout } = this.props;
+    const clsname = classNames({
+      "wea-associative-search-mult": true
+    });
+    return (<div className={`customMuiSelect wea-associative-search ${clsname}`} ref="customSelectMui">
+      <Dropdown trigger={["click"]} overlay={this.getList()}
+                onVisibleChange={visible => this.setState({ visible })} visible={visible}
+                getPopupContainer={() => (layout || document.body)}>
+        <div className="wea-select-input wdb cursor-pointer" ref="selectInput">
+          <span className="wdb">{this.getShownames()}</span>
+          {!this.state.visible ? <i className="icon-coms-down2 arrow"/> : <i className="icon-coms-up2 arrow"/>}
+        </div>
+      </Dropdown>
+    </div>);
+  }
+}
+
+export default Index;

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;
+    }
+  }
+}