hotfix/2.12.1.2404.02

更多按钮

pc4mobx/hrmSalary/components/moreBtnMenu/index.js

@@ -0,0 +1,62 @@
+/*
+ * Author: 黎永顺
+ * name: 更多菜单列表
+ * Description:
+ * Date: 2023/12/28
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
+import { Menu } from "antd";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showDrop: false
+    };
+  }
+
+  render() {
+    const { showDrop } = this.state;
+    const { dropMenuDatas } = this.props;
+    const menu = dropMenuDatas ?
+      <Menu mode="vertical" onClick={(o) => {
+        dropMenuDatas.forEach(d => d.key === o.key && typeof d.onClick === "function" && d.onClick(o.key));
+      }}>
+        {
+          dropMenuDatas && dropMenuDatas.map((d, i) => {
+            return (
+              <Menu.Item disabled={d.disabled} key={d.key || i}>
+                <span className="menu-icon">{d.icon}</span>
+                {d.content}
+              </Menu.Item>
+            );
+          })}
+      </Menu> : "";
+    return (
+      <div className="more-btn-menu-wrapper">
+        {
+          !_.isEmpty(dropMenuDatas) &&
+          <span className="more-btn" onClick={() => this.setState({ showDrop: true })}>
+            <i className="more-btn-icon icon-New-Flow-menu"/>
+          </span>
+        }
+        <div className="more-btn-menu"
+             onMouseLeave={() => this.setState({ showDrop: false })}
+             style={{ display: showDrop ? "block" : "none" }}>
+          <span className="more-btn"
+                onClick={() => this.setState({ showDrop: false })}>
+            <i className="more-btn-icon icon-New-Flow-menu"/>
+          </span>
+          <div className="more-btn-menu-icon-background"></div>
+          {menu}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/components/moreBtnMenu/index.less

@@ -0,0 +1,86 @@
+.more-btn-menu-wrapper {
+  position: relative;
+
+  .more-btn {
+    display: inline-block;
+    padding-left: 20px;
+    line-height: 40px;
+    vertical-align: middle;
+    cursor: pointer;
+
+    .more-btn-icon {
+      font-size: 16px;
+      color: #484848;
+      cursor: pointer;
+    }
+  }
+
+  .more-btn-menu {
+    max-width: 200px;
+    position: absolute;
+    right: -14px;
+    top: 45px;
+    border: 1px solid #dadada;
+    -webkit-box-shadow: 0 0 2px #dadada;
+    box-shadow: 0 0 2px #dadada;
+    z-index: 99;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background: #FFF;
+
+    .more-btn {
+      display: block;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      height: 44px;
+      line-height: 35px;
+      position: absolute;
+      right: -1px;
+      top: -44px;
+      padding: 0 13px;
+      border: 1px solid #dadada;
+      border-bottom: 0;
+      -webkit-box-shadow: 0 -1px 2px -1px #dadada;
+      box-shadow: 0 -1px 2px -1px #dadada;
+      background-color: #fff;
+    }
+
+    .more-btn-menu-icon-background {
+      width: 36px;
+      height: 100%;
+      background-color: #f2f5f7;
+      border: 1px solid #dadada;
+      border-right: 0;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      z-index: 0;
+      -webkit-box-sizing: content-box;
+      box-sizing: content-box;
+    }
+
+    .ant-menu {
+      margin: 10px 0;
+      border: 0;
+      text-align: left;
+      min-width: 120px;
+
+      .ant-menu-item {
+        height: 30px;
+        line-height: 30px;
+        padding: 0 5px 0 0;
+        overflow: hidden;
+        white-space: nowrap;
+        -o-text-overflow: ellipsis;
+        text-overflow: ellipsis;
+
+        .menu-icon {
+          display: inline-block;
+          width: 36px;
+          margin-right: 6px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}