产品-工资单验证方式修改

pc4mobx/hrmSalary/apis/payroll.js

@@ -367,3 +367,7 @@ export const getAvailableSalaryItemSet = (params) => {
 export const salaryBillSendSum = (params) => {
   return postFetch("/api/bs/hrmsalary/salaryBill/send/sum", params);
 };
+//工资单-验证方式
+export const payrollCheckType = params => {
+  return WeaTools.callApi("/api/bs/hrmsalary/salaryBill/payrollCheckType", "GET", params);
+};

pc4mobx/hrmSalary/components/captchaModal/index.js

@@ -0,0 +1,82 @@
+/*
+ * Author: 黎永顺
+ * name: 验证码弹框
+ * Description:
+ * Date: 2023/6/16
+ */
+import React, { Component } from "react";
+import { WeaDialog, WeaError, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
+import { Button } from "antd";
+import "./index.less";
+
+const { getLabel } = WeaLocaleProvider;
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      captcha: "",
+      time: 60
+    };
+    this.timeRef = null;
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timeRef);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && !nextProps.visible) {
+      this.setState({ captcha: "" });
+    } else {
+      clearInterval(this.timeRef);
+      this.setState({ time: 60 });
+    }
+  }
+
+  handleSendCaptcha = () => {
+    this.timeRef = setInterval(() => {
+      const { time } = this.state;
+      this.setState({ time: time - 1 }, () => {
+        if (this.state.time === -1) {
+          clearInterval(this.timeRef);
+          this.setState({ time: 60 });
+        }
+      });
+    }, 1000);
+  };
+
+  render() {
+    const { captcha, time } = this.state;
+    return (
+      <WeaDialog
+        initLoadCss {...this.props} style={{ width: 550 }}
+        className="captchaWrapper" title={getLabel(111, "验证码验证")}
+        buttons={[
+          <Button type="primary">{getLabel(826, "确定")}</Button>
+        ]}
+      >
+        <WeaSearchGroup needTigger={false} title="" showGroup>
+          <WeaFormItem
+            label={getLabel(111, "验证码")}
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+          >
+            <WeaError tipPosition="bottom" ref="weaError" error={getLabel(826, "验证码未填写")}>
+              <div className="captchaInputBox">
+                <WeaInput value={captcha} onChange={captcha => this.setState({ captcha })}/>
+                <Button type="primary" onClick={this.handleSendCaptcha} disabled={time !== 60}>
+                  {
+                    time === 60 ? getLabel(111, "发送验证码") : `${time}S`
+                  }
+                </Button>
+              </div>
+            </WeaError>
+          </WeaFormItem>
+        </WeaSearchGroup>
+      </WeaDialog>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/components/captchaModal/index.less

@@ -0,0 +1,29 @@
+.captchaWrapper {
+  .wea-dialog-body {
+    padding: 30px 20px;
+
+    .wea-form-item-wrapper {
+      .wea-error {
+        width: 100%;
+
+        .captchaInputBox {
+          display: flex;
+          align-items: center;
+
+          .wea-input-normal {
+            flex: 1;
+          }
+
+          button {
+            padding: 8px 10px;
+            border-radius: 0;
+            min-width: 80px;
+            text-align: center;
+            height: 30px;
+            line-height: 15px;
+          }
+        }
+      }
+    }
+  }
+}

pc4mobx/hrmSalary/pages/mySalary/index.js

@@ -2,12 +2,14 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import { DatePicker } from "antd";
 import { WeaNewScroll, WeaTop } from "ecCom";
-import { renderNoright } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
+import { renderNoright } from "../../util";
 import CustomTab from "../../components/customTab";
 import moment from "moment";
 import PayrollModal from "./payrollModal";
 import Authority from "./authority";
 import CustomPaginationTable from "../../components/customPaginationTable";
+import CaptchaModal from "../../components/captchaModal";
+import { payrollCheckType } from "../../apis/payroll";
 import "./index.less";
 
 const { RangePicker } = DatePicker;
@@ -22,15 +24,19 @@ export default class MySalary extends React.Component {
       selectedKey: "0",
       salaryBillVisible: false,
       salaryInfoId: "",
-      salaryRange: [moment().startOf("year").format("YYYY-MM"), moment().format("YYYY-MM")]
+      salaryRange: [moment().startOf("year").format("YYYY-MM"), moment().format("YYYY-MM")],
+      captchaVisible: false
     };
     this.pageInfo = { current: 1, pageSize: 10 };
     this.historyPageInfo = { current: 1, pageSize: 10 };
   }
 
-  componentWillMount() {
+  async componentWillMount() {
     const { mySalaryStore: { init } } = this.props;
-    init();
+    const data = await payrollCheckType();
+    console.log(data);
+    this.setState({ captchaVisible: true });
+    // init();
   }
 
   // 查看工资单
@@ -113,7 +119,7 @@ export default class MySalary extends React.Component {
       recordListPageInfo,
       myBillPageInfo
     } = mySalaryStore;
-    const { salaryBillVisible, salaryInfoId, salaryRange } = this.state;
+    const { salaryBillVisible, salaryInfoId, salaryRange, captchaVisible } = this.state;
     if (!hasRight && !loading) return renderNoright();
 
     const topTab = [
@@ -210,6 +216,7 @@ export default class MySalary extends React.Component {
             }}
           />
         }
+        <CaptchaModal visible={captchaVisible} onCancel={() => this.setState({ captchaVisible: false })}/>
       </div>
     );
   }