feature/2.19.1.2501.01-移动端查看工资单密码设置

pc4mobx/hrmSalary/pages/mobilePayroll/index.js

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactDom from "react-dom";
 import { inject, observer } from "mobx-react";
 import { toJS } from "mobx";
 import { getQueryString } from "../../util/url";
@@ -15,6 +16,7 @@ import { ConfirmBtns } from "../mySalary/mySalaryView";
 import Content from "../../components/pcTemplate/content";
 import MobileTemplate from "../../components/mobileTemplate";
 import "../mySalary/index.less";
+import MobileModal from "./mobileModal";
 
 const getLabel = WeaLocaleProvider.getLabel;
 
@@ -82,6 +84,8 @@ export default class MobilePayroll extends React.Component {
         API.isNeedSecondPwdVerify({ mouldCode: "HRM", itemCode: "SALARY" }, this.state.salaryBillToken)
           .then(({ status, isNeedSecondAuth }) => {
             if (status && isNeedSecondAuth) {
+              ReactDom.render(<MobileModal/>, document.body);
+              return;
               this.setState({ visible: true }, () => {
                 API.getSecondAuthForm({ mouldCode: "HRM", itemCode: "SALARY" }, this.state.salaryBillToken)
                   .then(({ status, notSetting }) => {
@@ -205,6 +209,12 @@ export default class MobilePayroll extends React.Component {
         }
       </WeaDialog>
       <PassSetDialog form={pwdForm} visible={pwdSetVisible} onCancel={() => this.setState({ pwdSetVisible: false })}/>
+      {/*发送验证码*/}
+      <CaptchaModal
+        visible={captchaVisible} id={getQueryString("id")}
+        onCancel={() => this.setState({ captchaVisible: false })}
+        onConfirm={() => this.props.mySalaryStore.setInitEmVerify()}
+      />
     </div>;
     const {
       salaryTemplate, salaryGroups, employeeInformation,
@@ -243,11 +253,6 @@ export default class MobilePayroll extends React.Component {
               </div>
             </Authority>
         }
-        <CaptchaModal
-          visible={captchaVisible} id={getQueryString("id")}
-          onCancel={() => this.setState({ captchaVisible: false })}
-          onConfirm={() => this.props.mySalaryStore.setInitEmVerify()}
-        />
       </React.Fragment>
     );
   }

pc4mobx/hrmSalary/pages/mobilePayroll/index.less

@@ -39,3 +39,54 @@
     }
   }
 }
+
+.am-modal-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  z-index: 999;
+  background-color: rgba(0, 0, 0, .4);
+}
+
+.am-modal {
+  position: relative;
+}
+
+.am-modal-transparent {
+  width: 270px;
+}
+
+.am-modal-transparent .am-modal-content {
+  border-radius: 7px;
+  padding-top: 15px;
+}
+
+.am-modal-content {
+  position: relative;
+  background-color: #fff;
+  border: 0;
+  background-clip: padding-box;
+  text-align: center;
+  height: 100%;
+  overflow: hidden;
+}
+
+.am-modal-wrap {
+  position: fixed;
+  overflow: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  z-index: 999;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateZ(1px);
+}

pc4mobx/hrmSalary/pages/mobilePayroll/mobileModal.js

@@ -0,0 +1,33 @@
+/*
+  *  自定义移动端弹框组件
+  *
+  * @Author:    黎永顺
+  * @Date:      2025/4/16
+  * @Wechat:
+  * @Email:     971387674@qq.com
+  * @description:
+*/
+import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class MobileModal extends Component {
+  render() {
+    return (
+      <div id="am-modal-container">
+        <div>
+          <div className="am-modal-mask"></div>
+          <div className="am-modal-wrap">
+            <div className="am-modal am-modal-transparent">
+              <div className="am-modal-content">123</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MobileModal;