Merge branch 'feature/0616-工资单验证方式' into develop

2023-06-16 17:37:21 +08:00 · 2023-06-16 17:37:21 +08:00 · 80a44a4a69
parent 2337a14828 cae153cebf
commit 80a44a4a69
7 changed files with 249 additions and 80 deletions
--- a/pc4mobx/hrmSalary/apis/payroll.js
+++ b/pc4mobx/hrmSalary/apis/payroll.js
@ -367,6 +367,14 @@ export const getAvailableSalaryItemSet = (params) => {
 export const salaryBillSendSum = (params) => {
  return postFetch("/api/bs/hrmsalary/salaryBill/send/sum", params);
 };
+//工资单发放-发送短信验证码
+export const sendMobileCode = (params) => {
+  return postFetch("/api/bs/hrmsalary/salaryBill/sendMobileCode", params);
+};
+//工资单-验证方式
+export const payrollCheckType = params => {
+  return WeaTools.callApi("/api/bs/hrmsalary/salaryBill/payrollCheckType", "GET", params);
+};

 // 工资单基础设置-获取设置列表
 export const getSalaryBillBaseSetForm = (id) => {
--- a/pc4mobx/hrmSalary/components/captchaModal/index.js
+++ b/pc4mobx/hrmSalary/components/captchaModal/index.js
@ -0,0 +1,94 @@
+/*
+ * Author: 黎永顺
+ * name: 验证码弹框
+ * Description:
+ * Date: 2023/6/16
+ */
+import React, { Component } from "react";
+import { WeaDialog, WeaError, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
+import { sendMobileCode } from "../../apis/payroll";
+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) {
+      clearInterval(this.timeRef);
+      this.setState({ captcha: "", time: 60 });
+    }
+  }
+
+  handleSendCaptcha = () => {
+    sendMobileCode({ id: this.props.id }).then(({ status, data }) => {
+      if (status) {
+        console.log(data);
+        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);
+      }
+    });
+  };
+  handleConfirm = () => {
+    if (!this.state.captcha) {
+      this.refs.weaError.showError();
+      // return
+    }
+    this.props.onCancel();
+    this.props.onConfirm();
+  };
+
+  render() {
+    const { captcha, time } = this.state;
+    return (
+      <WeaDialog
+        initLoadCss {...this.props} style={{ width: 550 }}
+        className="captchaWrapper" title={getLabel(111, "验证码验证")}
+        buttons={[
+          <Button type="primary" onClick={this.handleConfirm}>{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;
--- a/pc4mobx/hrmSalary/components/captchaModal/index.less
+++ b/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;
+          }
+        }
+      }
+    }
+  }
+}
--- a/pc4mobx/hrmSalary/pages/mobilePayroll/index.js
+++ b/pc4mobx/hrmSalary/pages/mobilePayroll/index.js
@ -8,7 +8,9 @@ import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
 import PhoneTemplate from "../payroll/templatePreview/phoneTemplate";
 import "../payroll/templatePreview/index.less";
 import * as API from "../../apis/mySalaryBenefits";
+import { payrollCheckType } from "../../apis/payroll";
 import "./index.less";
+import CaptchaModal from "../../components/captchaModal";

@inject("mySalaryStore")
@observer
@ -17,6 +19,7 @@ export default class MobilePayroll extends React.Component {
    super(props);
    this.state = {
      visible: false,
+      captchaVisible: false,
      authCode: "",
      mySalaryBillData: {
        employeeInformation: {},
@ -26,13 +29,20 @@ export default class MobilePayroll extends React.Component {
    this.id = "";
  }

-  componentWillMount() {
+  async componentWillMount() {
    const type = getQueryString("type");
    this.id = getQueryString("id");
    const { mySalaryStore: { init } } = this.props;
-    type !== "phone" && init(false);
-    type === "phone" && this.initMobile();
    this.getMySalaryBill(this.id);
+    const { data, status } = await payrollCheckType();
+    if (type !== "phone") {
+      if (status && data === "PWD") {
+        init(false);
+      } else {
+        this.setState({ captchaVisible: true });
+      }
+    }
+    type === "phone" && this.initMobile();
  }

  initMobile = () => {
@ -96,7 +106,7 @@ export default class MobilePayroll extends React.Component {

  render() {
    const { mySalaryStore: { clearLoading } } = this.props;
-    const { mySalaryBillData, visible } = this.state;
+    const { mySalaryBillData, visible, captchaVisible } = this.state;
    const type = getQueryString("type");
    const employeeInformation = mySalaryBillData.employeeInformation ? mySalaryBillData.employeeInformation : {};
    const salaryGroups = mySalaryBillData.salaryGroups ? mySalaryBillData.salaryGroups : [];
@ -148,6 +158,11 @@ 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()}
+        />
      </div>
    );
  }
--- a/pc4mobx/hrmSalary/pages/mySalary/index.js
+++ b/pc4mobx/hrmSalary/pages/mySalary/index.js
@ -6,7 +6,6 @@ import { renderNoright } from "../../util"; // 渲染form数据的方法：因
 import CustomTab from "../../components/customTab";
 import moment from "moment";
 import PayrollModal from "./payrollModal";
-import Authority from "./authority";
 import CustomPaginationTable from "../../components/customPaginationTable";
 import "./index.less";

@ -29,9 +28,9 @@ export default class MySalary extends React.Component {
    this.historyPageInfo = { current: 1, pageSize: 10 };
  }

-  componentWillMount() {
-    const { mySalaryStore: { init } } = this.props;
-    init();
+  componentDidMount() {
+    const { mySalaryStore: { mySalaryBillList } } = this.props;
+    mySalaryBillList([moment().startOf("year").format("YYYY-MM"), moment().format("YYYY-MM")]);
  }

  // 查看工资单
@ -114,7 +113,6 @@ export default class MySalary extends React.Component {
      myBillPageInfo
    } = mySalaryStore;
    const { salaryBillVisible, salaryInfoId, salaryRange } = this.state;
-    if (!hasRight && !loading) return renderNoright();

    const topTab = [
      {
@ -141,64 +139,62 @@ export default class MySalary extends React.Component {
    };
    return (
      <div className="mySalaryBenefitsWrapper">
-        <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`} store={mySalaryStore}>
-          <WeaTop
-            title="我的薪资福利" // 文字
-            icon={<i className="icon-coms-fa"/>} // 左侧图标
-            iconBgcolor="#F14A2D" // 左侧图标背景色
-            showDropIcon={false} // 是否显示下拉按钮
-          >
-            <CustomTab
-              topTab={topTab}
-              searchOperationItem={renderSearchOperationItem()}
-              onChange={(v) => {
-                this.handleTabChange(v);
-                this.setState({ selectedKey: v });
-              }}
-            />
-            <div className="tableWrapper">
-              <WeaNewScroll height="100%">
-                {
-                  this.state.selectedKey === "0" &&
-                  <CustomPaginationTable
-                    loading={loading}
-                    columns={this.getColumns()}
-                    dataSource={myBillDataSource ? myBillDataSource : []}
-                    total={myBillPageInfo.total}
-                    current={myBillPageInfo.pageNum}
-                    pageSize={this.pageInfo.pageSize}
-                    onPageChange={(value) => {
-                      this.pageInfo.current = value;
-                      this.handlePageChange();
-                    }}
-                    onShowSizeChange={(current, pageSize) => {
-                      this.pageInfo = { current, pageSize };
-                      this.handlePageChange();
-                    }}
-                  />
-                }
-                {
-                  this.state.selectedKey === "2" &&
-                  <CustomPaginationTable
-                    columns={recordListColumns}
-                    dataSource={recordListDataSource}
-                    total={recordListPageInfo.total}
-                    current={recordListPageInfo.pageNum}
-                    pageSize={this.historyPageInfo.pageSize}
-                    onPageChange={(value) => {
-                      this.historyPageInfo.current = value;
-                      this.handleHistoryPageChange();
-                    }}
-                    onShowSizeChange={(current, pageSize) => {
-                      this.historyPageInfo = { current, pageSize };
-                      this.handleHistoryPageChange();
-                    }}
-                  />
-                }
-              </WeaNewScroll>
-            </div>
-          </WeaTop>
-        </Authority>
+        <WeaTop
+          title="我的薪资福利" // 文字
+          icon={<i className="icon-coms-fa"/>} // 左侧图标
+          iconBgcolor="#F14A2D" // 左侧图标背景色
+          showDropIcon={false} // 是否显示下拉按钮
+        >
+          <CustomTab
+            topTab={topTab}
+            searchOperationItem={renderSearchOperationItem()}
+            onChange={(v) => {
+              this.handleTabChange(v);
+              this.setState({ selectedKey: v });
+            }}
+          />
+          <div className="tableWrapper">
+            <WeaNewScroll height="100%">
+              {
+                this.state.selectedKey === "0" &&
+                <CustomPaginationTable
+                  loading={loading}
+                  columns={this.getColumns()}
+                  dataSource={myBillDataSource ? myBillDataSource : []}
+                  total={myBillPageInfo.total}
+                  current={myBillPageInfo.pageNum}
+                  pageSize={this.pageInfo.pageSize}
+                  onPageChange={(value) => {
+                    this.pageInfo.current = value;
+                    this.handlePageChange();
+                  }}
+                  onShowSizeChange={(current, pageSize) => {
+                    this.pageInfo = { current, pageSize };
+                    this.handlePageChange();
+                  }}
+                />
+              }
+              {
+                this.state.selectedKey === "2" &&
+                <CustomPaginationTable
+                  columns={recordListColumns}
+                  dataSource={recordListDataSource}
+                  total={recordListPageInfo.total}
+                  current={recordListPageInfo.pageNum}
+                  pageSize={this.historyPageInfo.pageSize}
+                  onPageChange={(value) => {
+                    this.historyPageInfo.current = value;
+                    this.handleHistoryPageChange();
+                  }}
+                  onShowSizeChange={(current, pageSize) => {
+                    this.historyPageInfo = { current, pageSize };
+                    this.handleHistoryPageChange();
+                  }}
+                />
+              }
+            </WeaNewScroll>
+          </div>
+        </WeaTop>
        {
          salaryBillVisible && <PayrollModal
            visible={salaryBillVisible}
--- a/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js
+++ b/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js
@ -7,31 +7,58 @@
 import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
 import { toJS } from "mobx";
+import Authority from "./authority";
 import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
+import { payrollCheckType } from "../../apis/payroll";
+import CaptchaModal from "../../components/captchaModal";
 import "../payroll/templatePreview/index.less";

@inject("mySalaryStore")
@observer
 class MySalaryView extends Component {
-  componentDidMount() {
-    const { mySalaryStore: { getMySalaryBill }, params: { salaryInfoId } } = this.props;
+  constructor(props) {
+    super(props);
+    this.state = {
+      captchaVisible: false
+    };
+  }
+
+  async componentDidMount() {
+    const { mySalaryStore: { getMySalaryBill, init }, params: { salaryInfoId } } = this.props;
+    const { data, status } = await payrollCheckType();
+    if (status && data === "PWD") {
+      init(false);
+    } else {
+      this.setState({ captchaVisible: true });
+    }
    getMySalaryBill(Number(salaryInfoId));
  }

  render() {
-    const { mySalaryStore: { mySalaryBill } } = this.props;
+    const { captchaVisible } = this.state;
+    const { mySalaryStore, params: { salaryInfoId } } = this.props;
+    const { mySalaryBill } = mySalaryStore;
    const employeeInformation = mySalaryBill.employeeInformation && toJS(mySalaryBill.employeeInformation);
    const salaryGroups = mySalaryBill.salaryGroups && toJS(mySalaryBill.salaryGroups);
    return (
-      <div>
-        <div className="templatePreview">
-          <ComputerTemplate
-            isPreview
-            salaryTemplateShowSet={JSON.stringify(mySalaryBill.salaryTemplate)}
-            salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}
-          />
-        </div>
-      </div>
+      <React.Fragment>
+        <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`} store={mySalaryStore}>
+          <div style={{ height: "100%", overflow: "auto" }}>
+            <div className="templatePreview">
+              <ComputerTemplate
+                isPreview isMsgPreview
+                salaryTemplateShowSet={JSON.stringify(mySalaryBill.salaryTemplate)}
+                salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}
+              />
+            </div>
+          </div>
+        </Authority>
+        <CaptchaModal
+          visible={captchaVisible} id={salaryInfoId}
+          onCancel={() => this.setState({ captchaVisible: false })}
+          onConfirm={() => mySalaryStore.setInitEmVerify()}
+        />
+      </React.Fragment>
    );
  }
 }
--- a/pc4mobx/hrmSalary/stores/taxAgent.js
+++ b/pc4mobx/hrmSalary/stores/taxAgent.js
@ -147,7 +147,7 @@ export class TaxAgentStore {
          this.setSalaryItemBtn((isOpenDevolution && (isChief || isAdminEnable)));
          //薪酬统计报表权限
          this.setStatisticsReportBtn(!isOpenDevolution ? true : !!(isAdminEnable || isChief));
-          this.setPayrollPermission(isAdminEnable && isOpenDevolution);
+          this.setPayrollPermission(isAdminEnable && isOpenDevolution || !isOpenDevolution);
          resolve({ status, data });
        } else {
          reject();