产品-智能算薪

pc4mobx/hrmSalary/components/TipLabel/index.less

@@ -1,36 +1,41 @@
 .tipLabelWrapper {
-    border-left: 1px solid #e2ecf2;
+  border-left: 1px solid #e2ecf2;
+  border-bottom: 1px solid #e2ecf2;
+  border-right: 1px solid #e2ecf2;
+  border-radius: 0px 0px 5px 5px;
+  width: 100%;
+  overflow: hidden;
+
+  .titleWrapper {
+    width: 100%;
+    line-height: 19.2px;
+    padding: 10px;
     border-bottom: 1px solid #e2ecf2;
-    border-right: 1px solid #e2ecf2;
+    background-color: #f7fbfe;
-    border-radius: 0px 0px 5px 5px;
+  }
+
+  .tipContentWrapper {
+    padding: 10px;
+    background: #FFF;
+  }
+
+  .tipContentItem {
+    line-height: 20px;
+    padding: 10px 16px 0px;
+    color: rgb(153, 153, 153);
+  }
+
+  .tipContentItem:first-child {
+    padding-top: 0;
+  }
+
+  .formLabel {
+    font-size: 14px;
+  }
+
+  .contentWrapper {
     width: 100%;
     overflow: hidden;
-    .titleWrapper {
+  }
-        width: 100%;
-        line-height: 19.2px;
-        padding: 10px;
-        border-bottom: 1px solid #e2ecf2;
-        background-color: #f7fbfe;
-    }
-    .tipContentWrapper {
-        padding: 10px;
-    }
-    .tipContentItem {
-        line-height: 20px;
-        padding: 0px 16px;
-        padding-top: 10px;
-        color: rgb(153, 153, 153);
-    }
-    .tipContentItem:first {
-        padding-top: 0px;
-    }
-
-    .formLabel {
-        font-size: 14px;
-    }
-    .contentWrapper {
-        width: 100%;
-        overflow: hidden;
-    }
 
 }

pc4mobx/hrmSalary/index.js

@@ -37,6 +37,7 @@ import EmployeeList from "./pages/employeeView";
 import ReportView from "./pages/reportView";
 import MySalaryView from "./pages/mySalary/mySalaryView";
 import WatermarkPreview from "./pages/payroll/watermarkPreview";
+import IntelligentCalculateSalarySettings from "./pages/intelligentCalculateSalarySettings";
 
 import stores from "./stores";
 import "./style/index";
@@ -86,6 +87,7 @@ const DataAcquisition = (props) => props.children;
 // fieldManagement 字段管理
 // analysisOfSalaryStatistics 薪酬统计分析
 // reportView 薪酬报表查看
+// intelligentCalculateSalarySettings 智能算薪
 
 const Routes = (
   <Route
@@ -163,6 +165,8 @@ const Routes = (
     <Route key="analysisOfSalaryStatistics" path="analysisOfSalaryStatistics" component={AnalysisOfSalaryStatistics}/>
     <Route key="analysisOfSalaryStatisticsId" path="analysisOfSalaryStatistics/:employeeId" component={EmployeeList}/>
     <Route key="reportView" path="reportView" component={ReportView}/>
+    <Route key="intelligentCalculateSalarySettings" path="intelligentCalculateSalarySettings"
+           component={IntelligentCalculateSalarySettings}/>
   </Route>
 );
 

pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/enableSettings.js

@@ -0,0 +1,69 @@
+/*
+ * Author: 黎永顺
+ * name: 启用设置
+ * Description:
+ * Date: 2023/7/19
+ */
+import React, { Component } from "react";
+import { Button, Col, Row } from "antd";
+import TipLabel from "../../../components/TipLabel";
+import { WeaCheckbox, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class EnableSettings extends Component {
+  render() {
+    const tipList = [
+      getLabel(111, "1、智能算薪默认是开启的，若购买了智能算薪，请先配置账号密码，在购买的流量足够的前提下即可正常使用；"),
+      getLabel(111, "2、您可在【接口流量统计】中查看接口流量使用情况；"),
+      getLabel(111, "3、您可以设置【流量不足提醒】，提前提醒可以避免次月要用时因流量不足无法使用的情况。"),
+      getLabel(111, "4、如您需了解您购买的流量的使用明细，可查看【流量使用记录】；")
+    ];
+    const Input = label => {
+      return (
+        <WeaFormItem label={label} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
+          <WeaInput/>
+        </WeaFormItem>
+      );
+    };
+    const InputPassword = label => {
+      return (
+        <WeaFormItem label={label} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
+          <WeaInput type="password"/>
+        </WeaFormItem>
+      );
+    };
+    return (
+      <Row className="enable-settings" gutter={16}>
+        <Col span={16}>
+          <div className="swith-area">
+            <div className="left">
+              <div className="title">{getLabel(111, "智能算薪")}</div>
+              <div
+                className="info">{getLabel(111, "开启智能算薪并输入正确的账号密码，且购买了智能算薪流量，才能正常使用智能算薪功能。")}</div>
+            </div>
+            <div className="right"><WeaCheckbox display="switch"/></div>
+          </div>
+          <div className="userinfo">
+            <div className="left">
+              <WeaSearchGroup
+                showGroup needTigger={false} col={3}
+                items={[
+                  { com: Input(getLabel(111, "账号")) },
+                  { com: InputPassword(getLabel(111, "密码")) }
+                ]}
+              />
+            </div>
+            <div className="right"><Button type="primary">{getLabel(111, "提交")}</Button></div>
+          </div>
+        </Col>
+        <Col span={8}>
+          <TipLabel tipList={tipList}/>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+export default EnableSettings;

pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/index.less

@@ -0,0 +1,58 @@
+.enable-settings {
+  .swith-area, .userinfo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    background-color: #fff;
+    box-sizing: border-box;
+    height: 80px;
+    border: 2px solid #e5e5e5;
+    border-left-color: #5d9cec;
+
+    .left {
+      padding: 10px 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+
+      .title {
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
+
+      .info {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+  }
+
+  .userinfo {
+    margin-top: 16px;
+
+    .left {
+      flex: 1 !important;
+
+      .wea-search-group, .wea-form-cell {
+        padding: 0;
+      }
+    }
+  }
+}
+
+.insufficientAlertWrapper {
+  background: #fff;
+  padding: 0;
+  border: 1px solid #f2f2f2;
+  border-bottom: none;
+
+  .wea-content {
+    padding: 0;
+
+    .wea-form-item {
+      padding: 5px 12px;
+      border-bottom: 1px solid #f2f2f2;
+    }
+  }
+}

pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/insufficientTrafficAlert.js

@@ -0,0 +1,57 @@
+/*
+ * Author: 黎永顺
+ * name:流量不足提醒
+ * Description:
+ * Date: 2023/7/19
+ */
+import React, { Component } from "react";
+import { WeaCheckbox, WeaFormItem, WeaHelpfulTip, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class InsufficientTrafficAlert extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      remind: "0"
+    };
+  }
+
+  render() {
+    const { remind } = this.state;
+    return (
+      <WeaSearchGroup showGroup needTigger={false} className="insufficientAlertWrapper">
+        <WeaFormItem label={getLabel(111, "提醒")} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
+          <WeaCheckbox display="switch" value={remind} onChange={remind => this.setState({ remind })}/>
+        </WeaFormItem>
+        {
+          remind === "1" &&
+          <React.Fragment>
+            <WeaFormItem
+              label={getLabel(111, "提醒规则")}
+              labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}
+            >
+              <WeaCheckbox display="switch"/>
+            </WeaFormItem>
+            <WeaFormItem
+              label={getLabel(111, "提醒推送方式")}
+              labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}
+            >
+              <WeaCheckbox display="switch"/>
+              <WeaHelpfulTip
+                width={200} style={{ marginLeft: 10 }}
+                title={getLabel(111, "使用云桥之前，请先确认企业微信是否绑定云桥。\n" +
+                  "使用邮箱之前，请先确认是否设置邮件提醒账号。\n" +
+                  "使用短信之前，请先确认是否新建签名。")}
+                placement="topLeft"
+              />
+            </WeaFormItem>
+          </React.Fragment>
+        }
+      </WeaSearchGroup>
+    );
+  }
+}
+
+export default InsufficientTrafficAlert;

pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/index.js

@@ -0,0 +1,53 @@
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaReqTop } from "ecCom";
+import EnableSettings from "./components/enableSettings";
+import InsufficientTrafficAlert from "./components/insufficientTrafficAlert";
+
+const getLabel = WeaLocaleProvider.getLabel;
+const tabs = [
+  { key: "ENABLE_SETTINGS", title: getLabel(111, "启用设置") },
+  { key: "INTERFACE_FLOW_STATISTICS", title: getLabel(111, "接口流量统计") },
+  { key: "INSUFFICIENT_TRAFFIC_ALERT", title: getLabel(111, "流量不足提醒") },
+  { key: "TRAFFIC_USAGE_RECORD", title: getLabel(111, "流量使用记录") }
+];
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedKey: "ENABLE_SETTINGS"
+    };
+  }
+
+  renderChildren = () => {
+    const { selectedKey } = this.state;
+    let CurrentDom = null;
+    switch (selectedKey) {
+      case "ENABLE_SETTINGS":
+        CurrentDom = <EnableSettings/>;
+        break;
+      case "INSUFFICIENT_TRAFFIC_ALERT":
+        CurrentDom = <InsufficientTrafficAlert/>;
+        break;
+      default:
+        CurrentDom = null;
+        break;
+    }
+    return CurrentDom;
+  };
+
+  render() {
+    const { selectedKey } = this.state;
+    return (
+      <WeaReqTop
+        title={getLabel(111, "智能算薪")} selectedKey={selectedKey}
+        icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
+        tabDatas={tabs} onChange={selectedKey => this.setState({ selectedKey })}
+      >
+        <div style={{ height: "100%", background: "#f6f6f6", padding: 16 }}>{this.renderChildren()}</div>
+      </WeaReqTop>
+    );
+  }
+}
+
+export default Index;