Merge branch 'feature/V2-工资单发放详情页添加发放进度条' into develop

2023-06-07 15:35:36 +08:00 · 2023-06-07 15:35:36 +08:00 · 335e86d9c8
parent 4891fff298 c15fc127d2
commit 335e86d9c8
5 changed files with 240 additions and 102 deletions
--- a/pc4mobx/hrmSalary/apis/payroll.js
+++ b/pc4mobx/hrmSalary/apis/payroll.js
@ -12,6 +12,10 @@ export const getPayrollList = params => {
    body: JSON.stringify(params)
  }).then(res => res.json());
 };
+// 工资单发放进度条
+export const getPayrollIssuanceProgressBar = (id) => {
+  return WeaTools.callApi("/api/bs/hrmsalary/progress/getRate?cacheKey=SALARY_GRANT_PROGRESS_" + id, "get", {});
+};

 //工资单-获取table提示信息
 export const getPayrollInfo = params => {
--- a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
@ -1,14 +1,17 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
 import { toJS } from "mobx";
-import { WeaDropdown, WeaHelpfulTip, WeaTab, WeaTop } from "ecCom";
+import { WeaDropdown, WeaHelpfulTip, WeaLocaleProvider, WeaTab, WeaTop } from "ecCom";
 import { Button, Dropdown, Menu, message } from "antd";
 import "./index.less";
 import { getQueryString } from "../../../util/url";
 import { getSearchs, renderLoading } from "../../../util";
 import CustomPaginationTable from "../../../components/customPaginationTable";
 import PayrollPartTable from "./payrollPartTable";
+import { getPayrollIssuanceProgressBar } from "../../../apis/payroll";
+import ProgressModal from "../../../components/progressModal";

+const getLabel = WeaLocaleProvider.getLabel;
 const { ButtonSelect } = WeaDropdown;

@inject("payrollStore")
@ -20,6 +23,8 @@ export default class PayrollGrant extends React.Component {
      selectedRowKeys: [],
      currentId: "",
      selectedKey: "0",
+      progressVisible: false,
+      progress: 0,
      payrollPartModalParams: {
        visible: false,
        title: "工资单发放",
@ -28,6 +33,7 @@ export default class PayrollGrant extends React.Component {
      }
    };
    this.pageInfo = { current: 1, pageSize: 10 };
+    this.timer = null;
  }

  componentWillMount() {
@ -66,6 +72,7 @@ export default class PayrollGrant extends React.Component {

  // 发放
  handleGrant = (record) => {
+    this.setState({ progress: 0 });
    const { payrollStore } = this.props;
    const { currentId, selectedKey } = this.state;
    const { grantPayroll, getInfoList } = payrollStore;
@ -73,14 +80,39 @@ export default class PayrollGrant extends React.Component {
      ...record,
      salarySendId: currentId
    }).then(() => {
-      getInfoList({
-        salarySendId: currentId,
-        isGranted: selectedKey !== "0",
-        current: this.pageInfo.current,
-        pageSize: this.pageInfo.pageSize
+      this.setState({ progressVisible: true });
+      if (this.timer) clearInterval(this.timer);
+      this.timer = setInterval(() => {
+        getPayrollIssuanceProgressBar(currentId).then(({ data, status }) => {
+          let progress = data.progress;
+          if (progress === 1 && this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+            this.setState({
+              progressVisible: false,
+              progress: 0
+            });
+            message.success(data.message);
+            getInfoList({
+              salarySendId: currentId,
+              isGranted: selectedKey !== "0",
+              current: this.pageInfo.current,
+              pageSize: this.pageInfo.pageSize

-      });
-      this.handleClose();
+            });
+            this.handleClose();
+          } else if (!data.status) {
+            clearInterval(this.timer);
+            this.timer = null;
+            this.setState({
+              progressVisible: false,
+              progress: 0
+            });
+            message.error(data.message);
+          }
+          this.setState({ progress: Number(progress) * 100 });
+        });
+      }, 1000);
    });
  };

@ -159,6 +191,7 @@ export default class PayrollGrant extends React.Component {
  };
  // 全部发送
  handleGrantAll = () => {
+    this.setState({ progress: 0 });
    const { payrollStore } = this.props;
    const { currentId, selectedKey } = this.state;
    const { grantPayroll, getInfoList } = payrollStore;
@ -166,22 +199,73 @@ export default class PayrollGrant extends React.Component {
      ids: [],
      salarySendId: currentId
    }).then(() => {
-      getInfoList({
-        salarySendId: currentId,
-        isGranted: selectedKey !== "0"
-      });
+      this.setState({ progressVisible: true });
+      if (this.timer) clearInterval(this.timer);
+      this.timer = setInterval(() => {
+        getPayrollIssuanceProgressBar(currentId).then(({ data, status }) => {
+          let progress = data.progress;
+          if (progress === 1 && this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+            this.setState({
+              progressVisible: false,
+              progress: 0
+            });
+            message.success(data.message);
+            getInfoList({
+              salarySendId: currentId,
+              isGranted: selectedKey !== "0"
+            });
+          } else if (!data.status) {
+            clearInterval(this.timer);
+            this.timer = null;
+            this.setState({
+              progressVisible: false,
+              progress: 0
+            });
+            message.error(data.message);
+          }
+          this.setState({ progress: Number(progress) * 100 });
+        });
+      }, 1000);
    });
  };
  // 发放所选
  fetchGrantPayRoll = (payload) => {
+    this.setState({ progress: 0 });
    const { selectedKey, currentId } = this.state;
    const { payrollStore: { grantPayroll, getInfoList } } = this.props;
    grantPayroll(payload).then(() => {
-      getInfoList({
-        salarySendId: currentId,
-        isGranted: selectedKey !== "0"
-      });
-      this.setState({ selectedRowKeys: [] });
+      this.setState({ progressVisible: true });
+      if (this.timer) clearInterval(this.timer);
+      this.timer = setInterval(() => {
+        getPayrollIssuanceProgressBar(currentId).then(({ data, status }) => {
+          let progress = data.progress;
+          if (progress === 1 && this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+            this.setState({
+              progressVisible: false,
+              progress: 0
+            });
+            message.success(data.message);
+            getInfoList({
+              salarySendId: currentId,
+              isGranted: selectedKey !== "0"
+            });
+            this.setState({ selectedRowKeys: [] });
+          } else if (!data.status) {
+            clearInterval(this.timer);
+            this.timer = null;
+            this.setState({
+              progressVisible: false,
+              progress: 0
+            });
+            message.error(data.message);
+          }
+          this.setState({ progress: Number(progress) * 100 });
+        });
+      }, 1000);
    });
  };

@ -218,7 +302,7 @@ export default class PayrollGrant extends React.Component {
    const { payrollStore } = this.props;
    const { salaryGrantTableStore: columns, salarySendDetailBaseInfo } = payrollStore;
    const notShowGrantOrWithdraw = salarySendDetailBaseInfo.haveBackCalc === 1 && salarySendDetailBaseInfo.salaryAcctType === "0";
-    return [
+    return _.map([
      ...toJS(columns),
      {
        title: "操作",
@ -226,7 +310,7 @@ export default class PayrollGrant extends React.Component {
        dataIndex: "",
        display: true,
        render: (text, record) => {
-          if (record.sendStatus === "已发放" && !notShowGrantOrWithdraw) {
+          if (record.sendStatus === "1" && !notShowGrantOrWithdraw) {
            return (
              <a
                href="javascript:void(0);"
@ -245,7 +329,17 @@ export default class PayrollGrant extends React.Component {
          }
        }
      }
-    ];
+    ], item => {
+      if (item.dataIndex === "sendStatus") {
+        return {
+          ...item,
+          render: (text, record) => {
+            return <span>{record.sendStatus === "0" ? getLabel(111, "未发放") : record.sendStatus === "1" ? getLabel(111, "已发放") : getLabel(111, "已撤回")}</span>;
+          }
+        };
+      }
+      return { ...item };
+    });
  };

  getSearchsAdQuick() {
@ -284,7 +378,7 @@ export default class PayrollGrant extends React.Component {
            { key: "SELECT", show: "发放所选", selected: false },
            { key: "PART", show: "部分发放", selected: false }
          ]}
-          btnProps={{loading: btnLoading}}
+          btnProps={{ loading: btnLoading }}
          btnOnClick={this.sendPayroll}
          menuOnClick={(key) => this.sendPayroll(key)}
        />,
@ -298,7 +392,7 @@ export default class PayrollGrant extends React.Component {
            { key: "recallSelected", show: "撤回所选", selected: false },
            { key: "partialWithdrawal", show: "部分撤回", selected: false }
          ]}
-          btnProps={{loading: btnLoading}}
+          btnProps={{ loading: btnLoading }}
          btnOnClick={this.withdrawalPayroll}
          menuOnClick={(key) => this.withdrawalPayroll(key)}
        />,
@ -505,6 +599,18 @@ export default class PayrollGrant extends React.Component {
          onWithdraw={this.handleWithdraw}
          onGrant={this.handleGrant}
        />
+        {
+          this.state.progressVisible &&
+          <ProgressModal
+            visible={this.state.progressVisible}
+            onCancel={() => {
+              this.setState({ progressVisible: false, progress: 0 });
+              clearInterval(this.timer);
+              this.timer = null;
+            }}
+            progress={this.state.progress}
+          />
+        }
      </div>
    );
  }
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js
@ -1,9 +1,11 @@
 import React from "react";
-import { WeaFormItem, WeaInput, WeaSearchGroup, WeaSelect } from "ecCom";
+import { WeaCheckbox, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup, WeaSelect } from "ecCom";
 import { inject, observer } from "mobx-react";
 import { getReplenishRuleSetOptions } from "../../../apis/payroll";
 import { toJS } from "mobx";
+import "./index.less";

+const getLabel = WeaLocaleProvider.getLabel;
@inject("payrollStore")
@observer
 export default class BaseInformForm extends React.Component {
@ -31,6 +33,7 @@ export default class BaseInformForm extends React.Component {
          }, ...toJS(data.salarySobOptions)],
          request: {
            ...data.templateBaseData,
+            msgStatus: !this.props.id ? "1" : data.templateBaseData.msgStatus,
            reissueRule: data.templateBaseData.replenishRule ? "1" : "0",
            ...JSON.parse(templateBaseData)
          }
@ -70,86 +73,99 @@ export default class BaseInformForm extends React.Component {

  render() {
    const { request, options, replenishRuleOptions } = this.state;
-    const { salarySob, name, description, replenishName, replenishRule, reissueRule } = request;
+    const { salarySob, name, description, replenishName, replenishRule, reissueRule, msgStatus, emailStatus } = request;

    return (
-      <WeaSearchGroup title="基础信息" items={[]} needTigger showGroup col={1}>
-        <WeaFormItem
-          label="薪资账套"
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
-        >
-          {
-            this.state.inited &&
-            <WeaSelect
-              viewAttr={3}
-              options={options}
-              value={salarySob ? salarySob : ""}
-              style={{ width: 200 }}
-              onChange={value => this.hanldeChange({ salarySob: value })}/>
-          }
-        </WeaFormItem>
-        <WeaFormItem
-          label="工资单模板名称"
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
-        >
-          <WeaInput
-            value={name}
-            viewAttr={3}
-            onChange={value => this.hanldeChange({ name: value })}
-          />
-        </WeaFormItem>
-        <WeaFormItem
-          label="补发工资单模板名称"
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
-        >
-          <WeaInput
-            value={replenishName}
-            viewAttr={3}
-            onChange={value => this.hanldeChange({ replenishName: value })}
-          />
-        </WeaFormItem>
-        <WeaFormItem
-          label="补发工资单名单生成规则"
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
-        >
-          <WeaSelect
-            options={[{ key: "0", showname: "全部" }, { key: "1", showname: "按规则" }]}
-            value={reissueRule}
-            detailtype={3}
-            viewAttr={3}
-            onChange={value => this.hanldeChange({ reissueRule: value })}
-          />
-        </WeaFormItem>
-        {
-          reissueRule !== "0" &&
+      <React.Fragment>
+        <WeaSearchGroup title="基础信息" items={[]} needTigger showGroup col={1} className="payrollBaseInfoWrapper">
          <WeaFormItem
-            label="规则设置"
+            label="薪资账套"
+            labelCol={{ span: 6 }}
+            wrapperCol={{ span: 18 }}
+          >
+            {
+              this.state.inited &&
+              <WeaSelect
+                viewAttr={3}
+                options={options}
+                value={salarySob ? salarySob : ""}
+                style={{ width: 200 }}
+                onChange={value => this.hanldeChange({ salarySob: value })}/>
+            }
+          </WeaFormItem>
+          <WeaFormItem
+            label="工资单模板名称"
+            labelCol={{ span: 6 }}
+            wrapperCol={{ span: 18 }}
+          >
+            <WeaInput
+              value={name}
+              viewAttr={3}
+              onChange={value => this.hanldeChange({ name: value })}
+            />
+          </WeaFormItem>
+          <WeaFormItem
+            label="补发工资单模板名称"
+            labelCol={{ span: 6 }}
+            wrapperCol={{ span: 18 }}
+          >
+            <WeaInput
+              value={replenishName}
+              viewAttr={3}
+              onChange={value => this.hanldeChange({ replenishName: value })}
+            />
+          </WeaFormItem>
+          <WeaFormItem
+            label="补发工资单名单生成规则"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
          >
            <WeaSelect
-              options={replenishRuleOptions}
-              value={replenishRule}
+              options={[{ key: "0", showname: "全部" }, { key: "1", showname: "按规则" }]}
+              value={reissueRule}
+              detailtype={3}
              viewAttr={3}
-              onChange={value => this.hanldeChange({ replenishRule: value })}
+              onChange={value => this.hanldeChange({ reissueRule: value })}
            />
          </WeaFormItem>
-        }
-        <WeaFormItem
-          label="备注"
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
-        >
-          <WeaInput
-            value={description}
-            onChange={value => this.hanldeChange({ description: value })}
-          />
-        </WeaFormItem>
-      </WeaSearchGroup>
+          {
+            reissueRule !== "0" &&
+            <WeaFormItem
+              label="规则设置"
+              labelCol={{ span: 6 }}
+              wrapperCol={{ span: 18 }}
+            >
+              <WeaSelect
+                options={replenishRuleOptions}
+                value={replenishRule}
+                viewAttr={3}
+                onChange={value => this.hanldeChange({ replenishRule: value })}
+              />
+            </WeaFormItem>
+          }
+          <WeaFormItem
+            label="备注"
+            labelCol={{ span: 6 }}
+            wrapperCol={{ span: 18 }}
+          >
+            <WeaInput
+              value={description}
+              onChange={value => this.hanldeChange({ description: value })}
+            />
+          </WeaFormItem>
+        </WeaSearchGroup>
+        <WeaSearchGroup title={getLabel(111, "发送设置")} items={[]} needTigger showGroup col={1}
+                        className="payrollBaseInfoWrapper">
+          <WeaFormItem label={getLabel(111, "系统消息")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+            <WeaCheckbox value={msgStatus ? "1" : "0"} display="switch"
+                         onChange={value => this.hanldeChange({ msgStatus: value === "1" })}/>
+          </WeaFormItem>
+          <WeaFormItem label={getLabel(111, "邮件")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+            <WeaCheckbox value={emailStatus ? "1" : "0"} display="switch"
+                         onChange={value => this.hanldeChange({ emailStatus: value === "1" })}/>
+          </WeaFormItem>
+        </WeaSearchGroup>
+      </React.Fragment>
    );
  }
 }
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
@ -223,3 +223,15 @@
    padding: 16px;
  }
 }
+
+.payrollBaseInfoWrapper {
+  .wea-form-cell-wrapper {
+    border: 1px solid #e5e5e5;
+    border-bottom: none;
+
+    .wea-form-item {
+      padding: 5px 16px;
+      border-bottom: 1px solid #e5e5e5;
+    }
+  }
+}
--- a/pc4mobx/hrmSalary/stores/payroll.js
+++ b/pc4mobx/hrmSalary/stores/payroll.js
@ -508,17 +508,17 @@ export class payrollStore {
  @action
  grantPayroll = (params = {}) => {
    return new Promise((resolve, reject) => {
-      message.destroy();
-      message.loading("正在发放中...", 0);
+      // message.destroy();
+      // message.loading("正在发放中...", 0);
      this.btnLoading = true;
-      WeaLoadingGlobal.start();
+      // WeaLoadingGlobal.start();
      API.grantPayroll(params).then(res => {
        this.btnLoading = false;
-        WeaLoadingGlobal.end();
-        WeaLoadingGlobal.destroy();
-        message.destroy();
+        // WeaLoadingGlobal.end();
+        // WeaLoadingGlobal.destroy();
+        // message.destroy();
        if (res.status) {
-          message.success("发送成功");
+          // message.success("发送成功");
          resolve();
        } else {
          message.error(res.errormsg || "发送失败");
@ -526,8 +526,8 @@ export class payrollStore {
        }
      }).catch(() => {
        this.btnLoading = false
-        WeaLoadingGlobal.end();
-        WeaLoadingGlobal.destroy();
+        // WeaLoadingGlobal.end();
+        // WeaLoadingGlobal.destroy();
      });
    });
  };