产品-工资单模板定时发放功能开发

pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js

@@ -1,7 +1,8 @@
 import React from "react";
-import { WeaCheckbox, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup, WeaSelect } from "ecCom";
+import { WeaCheckbox, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup, WeaSelect, WeaTimePicker } from "ecCom";
 import { inject, observer } from "mobx-react";
 import { getReplenishRuleSetOptions } from "../../../apis/payroll";
+import moment from "moment";
 import { toJS } from "mobx";
 import "./index.less";
 
@@ -35,7 +36,8 @@ export default class BaseInformForm extends React.Component {
             ...data.templateBaseData,
             msgStatus: !this.props.id ? "1" : data.templateBaseData.msgStatus,
             reissueRule: data.templateBaseData.replenishRule ? "1" : "0",
-            ...JSON.parse(templateBaseData)
+            ...JSON.parse(templateBaseData),
+            sendEmail: ""
           }
         }, () => {
           this.props.onChange && this.props.onChange(this.state.request);
@@ -73,7 +75,19 @@ export default class BaseInformForm extends React.Component {
 
   render() {
     const { request, options, replenishRuleOptions } = this.state;
-    const { salarySob, name, description, replenishName, replenishRule, reissueRule, msgStatus, emailStatus } = request;
+    const {
+      salarySob,
+      name,
+      description,
+      replenishName,
+      replenishRule,
+      reissueRule,
+      msgStatus,
+      emailStatus,
+      autoSendStatus,
+      autoSendDayOfMonth,
+      autoSendTimeOfDay
+    } = request;
 
     return (
       <React.Fragment>
@@ -164,8 +178,61 @@ export default class BaseInformForm extends React.Component {
             <WeaCheckbox value={emailStatus ? "1" : "0"} display="switch"
                          onChange={value => this.hanldeChange({ emailStatus: value === "1" })}/>
           </WeaFormItem>
+          <WeaFormItem label={getLabel(111, "定时发送")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+            <WeaCheckbox value={autoSendStatus ? "1" : "0"} display="switch"
+                         onChange={value => this.hanldeChange({ autoSendStatus: value === "1" })}/>
+          </WeaFormItem>
+          {
+            autoSendStatus &&
+            <WeaFormItem label={getLabel(111, "发送时间")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+              <SendTimeComp
+                value={{
+                  autoSendDayOfMonth,
+                  autoSendTimeOfDay
+                }}
+                onChange={this.hanldeChange}
+              />
+            </WeaFormItem>
+          }
         </WeaSearchGroup>
       </React.Fragment>
     );
   }
 }
+
+const SendTimeComp = (props) => {
+  const { value, onChange } = props;
+  const { autoSendDayOfMonth, autoSendTimeOfDay } = value;
+
+  const handleChangeSendtime = (key, val) => {
+    onChange({ autoSendDayOfMonth, autoSendTimeOfDay, [key]: val });
+  };
+  return <div className="customTimeCompWrapper">
+    <div>
+      <span>{getLabel(111, "每月")}</span>
+      <WeaSelect
+        value={!_.isNil(autoSendDayOfMonth) ? autoSendDayOfMonth : "1"}
+        options={_.map(getDay(), item => ({ key: item, showname: item }))}
+        onChange={v => handleChangeSendtime("autoSendDayOfMonth", v)}
+      />
+      <span>{getLabel(16992, "号")}</span>
+    </div>
+    <WeaTimePicker value={!_.isNil(autoSendTimeOfDay) ? autoSendTimeOfDay : "09:00"} size="small"
+                   onChange={v => handleChangeSendtime("autoSendTimeOfDay", v)}/>
+  </div>;
+};
+
+const getDay = () => {
+  let days = [];
+  let day = getDaysInMonth(moment().year(), moment().month() + 1);
+  for (let i = 1; i <= day; i++) {
+    days.push(i);
+  }
+  return days;
+};
+
+const getDaysInMonth = (year, month) => {
+  month = parseInt(month, 10);
+  let d = new Date(year, month, 0);
+  return d.getDate();
+};

pc4mobx/hrmSalary/pages/payroll/stepForm/index.less

@@ -234,4 +234,20 @@
       border-bottom: 1px solid #e5e5e5;
     }
   }
+
+  .customTimeCompWrapper {
+    display: flex;
+    justify-content: flex-start;
+
+    & > div {
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
+
+      .wea-select {
+        width: 80px;
+        margin: 0 10px;
+      }
+    }
+  }
 }