diff --git a/pc4mobx/hrmSalary/components/mobileTemplate/index.js b/pc4mobx/hrmSalary/components/mobileTemplate/index.js index 063b8b8d..aeb0898e 100644 --- a/pc4mobx/hrmSalary/components/mobileTemplate/index.js +++ b/pc4mobx/hrmSalary/components/mobileTemplate/index.js @@ -14,11 +14,11 @@ const getLabel = WeaLocaleProvider.getLabel; class Index extends Component { render() { - const { theme, background, tip, tipPosi, itemTypeList } = this.props; + const { theme, background, tip, tipPosi, itemTypeList, title } = this.props; const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "mobile"); return ( -
{getLabel(111, "薪酬预览")}
+
{title || getLabel(111, "薪酬预览")}
@@ -57,7 +57,7 @@ class Index extends Component { return
{salaryItemShowName || name || ""}
-
{salaryItemValue || "100"}
+
{salaryItemValue}
; }) } @@ -76,6 +76,7 @@ class Index extends Component { !onlyOneGrup && tipPosi === "2" && tip &&
{tip}
} + {this.props.children}
diff --git a/pc4mobx/hrmSalary/components/mobileTemplate/index.less b/pc4mobx/hrmSalary/components/mobileTemplate/index.less index 49f8df16..5338957f 100644 --- a/pc4mobx/hrmSalary/components/mobileTemplate/index.less +++ b/pc4mobx/hrmSalary/components/mobileTemplate/index.less @@ -20,6 +20,18 @@ .bill-container { background: #f6f6f6; + .space { + width: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + margin-bottom: 16px; + + .ant-btn { + margin-right: 16px; + } + } + .bill-info-header { padding-top: 16px; diff --git a/pc4mobx/hrmSalary/components/pcTemplate/content.js b/pc4mobx/hrmSalary/components/pcTemplate/content.js new file mode 100644 index 00000000..a294e2df --- /dev/null +++ b/pc4mobx/hrmSalary/components/pcTemplate/content.js @@ -0,0 +1,82 @@ +import React, { Component } from "react"; +import { WeaLocaleProvider } from "ecCom"; +import moment from "moment"; +import { dealTemplate } from "./index"; + +const getLabel = WeaLocaleProvider.getLabel; + +class Content extends Component { + render() { + const { theme, background, tip, tipPosi, itemTypeList, sendTime = new Date() } = this.props; + const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "pc"); + return ( +
+
+
+
{theme || ""}
+
{moment(sendTime).format("YYYY-MM-DD HH:mm:ss")}
+
+
+ { + background && +
logo
+ } + { + !onlyOneGrup && tipPosi.toString() === "1" && tip && +
{tip}
+ } +
+ { + showData.map((groupItem, index) => { + // 如果当前组下没有条目 当前组直接不展示。 + if (!groupItem) return null; + const { groupId, groupName, items = [] } = groupItem; + return ( +
+ { + groupName ?
{groupName}
: null + } +
+ { + (onlyOneGrup && tipPosi.toString() === "1" && tip) && (
+
{getLabel(111, "发放说明")}
+
{tip}
+
) + } + { + items.map((templatItem, index) => { + const { salaryItemValue, name, salaryItemShowName } = templatItem || {}; + return
+
+ {salaryItemShowName || name || ""} +
+
{salaryItemValue || ""}
+
; + + }) + } + { + (onlyOneGrup && tipPosi.toString() === "2" && tip) && (
+
{getLabel(111, "发放说明")}
+
{tip}
+
) + } +
+
); + }) + } +
+ { + !onlyOneGrup && tipPosi.toString() === "2" && tip && +
{tip}
+ } +
+
+ {this.props.children} +
+ ); + } +} + +export default Content; diff --git a/pc4mobx/hrmSalary/components/pcTemplate/index.js b/pc4mobx/hrmSalary/components/pcTemplate/index.js index 511a42bc..824722e6 100644 --- a/pc4mobx/hrmSalary/components/pcTemplate/index.js +++ b/pc4mobx/hrmSalary/components/pcTemplate/index.js @@ -1,82 +1,15 @@ import React, { Component } from "react"; import { WeaLocaleProvider } from "ecCom"; -import moment from "moment"; +import Content from "./content"; import "./index.less"; const getLabel = WeaLocaleProvider.getLabel; class Index extends Component { render() { - const { theme, background, tip, tipPosi, itemTypeList } = this.props; - const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "pc"); return (
-
-
-
-
-
{theme || ""}
-
{moment().format("YYYY-MM-DD HH:mm:ss")}
-
-
- { - background && -
logo
- } - { - !onlyOneGrup && tipPosi === "1" && tip && -
{tip}
- } -
- { - showData.map((groupItem, index) => { - // 如果当前组下没有条目 当前组直接不展示。 - if (!groupItem) return null; - const { groupId, groupName, items = [] } = groupItem; - return ( -
- { - groupName ?
{groupName}
: null - } -
- { - (onlyOneGrup && tipPosi === "1" && tip) && (
-
{getLabel(111, "发放说明")}
-
{tip}
-
) - } - { - items.map((templatItem, index) => { - const { salaryItemValue, name, salaryItemShowName } = templatItem || {}; - return
-
- {salaryItemShowName || name || ""} -
-
{salaryItemValue || ""}
-
; - - }) - } - { - (onlyOneGrup && tipPosi === "2" && tip) && (
-
{getLabel(111, "发放说明")}
-
{tip}
-
) - } -
-
); - }) - } -
- { - !onlyOneGrup && tipPosi === "2" && tip && -
{tip}
- } -
-
-
-
+
); } @@ -91,7 +24,7 @@ export const dealTemplate = (itemTypeList, type) => { const { items, groupName, groupId } = group; if (items.length !== 0) { items.forEach((item) => { - item.salaryItemValue = "100"; + item.salaryItemValue = !_.isNil(item.salaryItemValue) ? item.salaryItemValue : "100"; }); if (items.length % 2 && type === "pc") items.push({}); // 未分类不展示标题 diff --git a/pc4mobx/hrmSalary/components/pcTemplate/index.less b/pc4mobx/hrmSalary/components/pcTemplate/index.less index 1341316d..404b8a20 100644 --- a/pc4mobx/hrmSalary/components/pcTemplate/index.less +++ b/pc4mobx/hrmSalary/components/pcTemplate/index.less @@ -5,144 +5,6 @@ .weapp-salary-sp { background: #f6f6f6; - - .salary-preview-container { - display: flex; - justify-content: flex-start; - align-items: center; - flex-direction: column; - width: 100%; - - .edition-center { - max-width: 1000px; - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - padding-bottom: 32px; - - .header { - height: 48px; - padding: 0 16px; - font-size: 12px; - color: #111; - - .header-title { - height: 22px; - font-size: 17px; - color: #111; - line-height: 22px; - font-weight: 400; - text-align: center; - } - - .header-salary-date-time { - margin-top: 16px; - text-align: center; - height: 14px; - font-size: 14px; - color: #999; - line-height: 14px; - font-weight: 400; - } - } - - .body { - width: 100%; - margin-top: 32px; - - .comp-img { - text-align: center; - - img { - width: 100%; - } - } - - .corporate-culture-text { - width: 100%; - margin-top: 16px; - text-align: center; - min-height: 12px; - font-size: 12px; - color: #111; - white-space: pre-wrap; - word-break: break-all; - } - - .data-detail { - margin-top: 16px; - - .salary-group { - margin-bottom: 16px; - - .group-title { - font-size: 14px; - } - - .group-list { - margin-top: 16px; - display: flex; - flex-wrap: wrap; - - .even { - border-left: 1px solid #e5e5e5; - } - - .zero, .first { - border-top: 1px solid #e5e5e5; - } - - .list-item { - width: 50%; - display: flex; - justify-content: left; - min-height: 40px; - align-items: center; - border-bottom: 1px solid #e5e5e5; - border-right: 1px solid #e5e5e5; - - .item-name { - flex-basis: 170px; - box-sizing: border-box; - width: 170px; - padding: 0 16px; - height: 100%; - background: #fbfbfb; - border-right: 1px solid #e5e5e5; - font-size: 12px; - color: #666; - display: flex; - justify-content: center; - align-items: center; - flex-shrink: 0; - - .text { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - text-overflow: ellipsis; - } - } - - .item-count { - flex-basis: 328px; - padding-left: 16px; - height: 100%; - line-height: 40px; - background: #fff; - font-size: 12px; - color: #111; - word-break: break-all; - } - } - } - } - } - } - } - } } .weapp-salary-payroll-pc-preview { @@ -151,3 +13,141 @@ overflow-y: auto; } } + +.salary-preview-container { + display: flex; + justify-content: flex-start; + align-items: center; + flex-direction: column; + width: 100%; + + .edition-center { + max-width: 1000px; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + padding-bottom: 32px; + + .header { + height: 48px; + padding: 0 16px; + font-size: 12px; + color: #111; + + .header-title { + height: 22px; + font-size: 17px; + color: #111; + line-height: 22px; + font-weight: 400; + text-align: center; + } + + .header-salary-date-time { + margin-top: 16px; + text-align: center; + height: 14px; + font-size: 14px; + color: #999; + line-height: 14px; + font-weight: 400; + } + } + + .body { + width: 100%; + margin-top: 32px; + + .comp-img { + text-align: center; + + img { + width: 100%; + } + } + + .corporate-culture-text { + width: 100%; + margin-top: 16px; + text-align: center; + min-height: 12px; + font-size: 12px; + color: #111; + white-space: pre-wrap; + word-break: break-all; + } + + .data-detail { + margin-top: 16px; + + .salary-group { + margin-bottom: 16px; + + .group-title { + font-size: 14px; + } + + .group-list { + margin-top: 16px; + display: flex; + flex-wrap: wrap; + + .even { + border-left: 1px solid #e5e5e5; + } + + .zero, .first { + border-top: 1px solid #e5e5e5; + } + + .list-item { + width: 50%; + display: flex; + justify-content: left; + min-height: 40px; + align-items: center; + border-bottom: 1px solid #e5e5e5; + border-right: 1px solid #e5e5e5; + + .item-name { + flex-basis: 170px; + box-sizing: border-box; + width: 170px; + padding: 0 16px; + height: 100%; + background: #fbfbfb; + border-right: 1px solid #e5e5e5; + font-size: 12px; + color: #666; + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + + .text { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .item-count { + flex-basis: 328px; + padding-left: 16px; + height: 100%; + line-height: 40px; + background: #fff; + font-size: 12px; + color: #111; + word-break: break-all; + } + } + } + } + } + } + } +} diff --git a/pc4mobx/hrmSalary/pages/mobilePayroll/index.js b/pc4mobx/hrmSalary/pages/mobilePayroll/index.js index 2b2308d1..6ae229c8 100644 --- a/pc4mobx/hrmSalary/pages/mobilePayroll/index.js +++ b/pc4mobx/hrmSalary/pages/mobilePayroll/index.js @@ -1,11 +1,10 @@ import React from "react"; import { inject, observer } from "mobx-react"; +import { toJS } from "mobx"; import { getQueryString } from "../../util/url"; import { WeaDialog, WeaError, WeaInput, WeaLocaleProvider } from "ecCom"; import { Button, message, Modal } from "antd"; import Authority from "../mySalary/authority"; -import ComputerTemplate from "../payroll/templatePreview/computerTemplate"; -import PhoneTemplate from "../payroll/templatePreview/phoneTemplate"; import "../payroll/templatePreview/index.less"; import * as API from "../../apis/mySalaryBenefits"; import { salaryBillGetToken } from "../../apis/mySalaryBenefits"; @@ -13,7 +12,9 @@ import { confirmSalaryBill, feedBackSalaryBill, payrollCheckType } from "../../a import CaptchaModal from "../../components/captchaModal"; import PassSetDialog from "./passSetDialog"; import { ConfirmBtns } from "../mySalary/mySalaryView"; -import "./index.less"; +import Content from "../../components/pcTemplate/content"; +import MobileTemplate from "../../components/mobileTemplate"; +import "../mySalary/index.less"; const getLabel = WeaLocaleProvider.getLabel; @@ -174,76 +175,68 @@ export default class MobilePayroll extends React.Component { const { mySalaryStore: { clearLoading, pwdForm } } = this.props; const { mySalaryBillData, visible, captchaVisible, notSetting, pwdSetVisible } = this.state; const type = getQueryString("type"); - const employeeInformation = mySalaryBillData.employeeInformation ? mySalaryBillData.employeeInformation : {}; - const salaryGroups = mySalaryBillData.salaryGroups ? mySalaryBillData.salaryGroups : []; + if (_.isEmpty(toJS(this.props.mySalaryStore.mySalaryBill))) return
+ this.setState({ visible: false }, () => clearLoading())} + title="请输入二次验证密码" visible={visible} initLoadCss + className="verifyWrapper" + hasScroll buttons={[ + + ]} + > + + this.setState({ authCode })}/> + + { + notSetting && +
+ {getLabel("514970", "您还未设置二次验证密码，点击")} + this.setState({ pwdSetVisible: true })}>{getLabel("30747", "设置")} +
+ } + + this.setState({ pwdSetVisible: false })}/> +
; + const { + salaryTemplate, salaryGroups, employeeInformation, + sendTime, confirmStatus + } = toJS(this.props.mySalaryStore.mySalaryBill); + const salaryProps = { + theme: salaryTemplate.theme, tip: salaryTemplate.textContent, sendTime, + background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "", + itemTypeList: [employeeInformation, ...salaryGroups] + }; return ( -
- this.setState({ visible: false }, () => clearLoading())} - title="请输入二次验证密码" visible={visible} initLoadCss - className="verifyWrapper" - hasScroll buttons={[ - - ]} - > - - this.setState({ authCode })}/> - - { - notSetting && -
- {getLabel("514970", "您还未设置二次验证密码，点击")} - this.setState({ pwdSetVisible: true })}>{getLabel("30747", "设置")} -
- } - - this.setState({ pwdSetVisible: false })}/> + { type === "phone" ? -
-
- - { - (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryBillData.confirmStatus) || mySalaryBillData.confirmStatus === "0")) && - - } - -
-
+ + { + (_.isNil(confirmStatus) || confirmStatus === "0") && + + } + : -
-
- - { - (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryBillData.confirmStatus) || mySalaryBillData.confirmStatus === "0")) && - - } - -
+
+ + { + (_.isNil(confirmStatus) || confirmStatus === "0") && + + } +
} @@ -252,7 +245,7 @@ export default class MobilePayroll extends React.Component { onCancel={() => this.setState({ captchaVisible: false })} onConfirm={() => this.props.mySalaryStore.setInitEmVerify()} /> -
+ ); } } diff --git a/pc4mobx/hrmSalary/pages/mySalary/index.less b/pc4mobx/hrmSalary/pages/mySalary/index.less index 8a2b690e..84745bee 100644 --- a/pc4mobx/hrmSalary/pages/mySalary/index.less +++ b/pc4mobx/hrmSalary/pages/mySalary/index.less @@ -20,3 +20,25 @@ } } } + +.weapp-salary-my-salary-view-payroll { + padding: 32px 0; + height: 100vh; + overflow-y: auto; + background: #f6f6f6; + + .space { + width: 100%; + max-width: 1000px; + display: flex; + align-items: center; + justify-content: flex-end; + + .ant-btn { + margin-right: 16px; + } + } +} + +.page { +} diff --git a/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js b/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js index 574c315d..0ddd835d 100644 --- a/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js +++ b/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js @@ -9,10 +9,10 @@ import { inject, observer } from "mobx-react"; import { Button, message, Modal } from "antd"; import { WeaLocaleProvider } from "ecCom"; import Authority from "./authority"; -import ComputerTemplate from "../payroll/templatePreview/computerTemplate"; +import Content from "../../components/pcTemplate/content"; import { confirmSalaryBill, feedBackSalaryBill, payrollCheckType } from "../../apis/payroll"; import CaptchaModal from "../../components/captchaModal"; -import "../payroll/templatePreview/index.less"; +import "./index.less"; const { getLabel } = WeaLocaleProvider; @@ -57,7 +57,7 @@ class MySalaryView extends Component { handleGoFeedback = () => { Modal.confirm({ title: getLabel(131329, "信息确认"), - content: getLabel(111, "请确认薪资信息是有误，进行反馈并发起反馈流程。"), + content: getLabel(544271, "请确认薪资信息是有误，进行反馈并发起反馈流程。"), onOk: () => { const { params: { salaryInfoId }, mySalaryStore: { getMySalaryBill } } = this.props; feedBackSalaryBill({ salaryInfoId }).then(({ status, errorMsg }) => { @@ -84,29 +84,26 @@ class MySalaryView extends Component { if (_.isEmpty(mySalaryStore)) { return
; } - const employeeInformation = !_.isEmpty(mySalaryStore) && mySalaryStore.employeeInformation; - const salaryGroups = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryGroups; - const salaryTemplateShowSet = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryTemplate; + const { salaryTemplate, salaryGroups, employeeInformation, sendTime } = mySalaryStore; + const salaryProps = { + theme: salaryTemplate.theme, tip: salaryTemplate.textContent, sendTime, + background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "", + itemTypeList: [employeeInformation, ...salaryGroups] + }; return ( -
-
- - { - (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryStore.confirmStatus) || mySalaryStore.confirmStatus === "0")) && - - } - -
+
+ + { + (_.isNil(mySalaryStore.confirmStatus) || mySalaryStore.confirmStatus === "0") && + + } +
{getLabel(111, "发放时间")} {moment(it.sendTime).format("YYYY-MM")}
- {`${getLabel(33564, "查看")}>`} + + {`${getLabel(33564, "查看")}>`} + ; }) } diff --git a/pc4mobx/hrmSalary/pages/mySalaryMobile/index.js b/pc4mobx/hrmSalary/pages/mySalaryMobile/index.js index e1fade72..88fd95b1 100644 --- a/pc4mobx/hrmSalary/pages/mySalaryMobile/index.js +++ b/pc4mobx/hrmSalary/pages/mySalaryMobile/index.js @@ -39,7 +39,7 @@ class Index extends Component { mySalaryMobile.removeEventListener("scroll", this.handleScroll, true); } - getMySalaryBillList = () => { + getMySalaryBillList = (type) => { const { salaryYearMonth, pageInfo } = this.state; this.setState({ loading: true }); mySalaryBillList({ salaryYearMonth, ...pageInfo }).then(({ status, data }) => { @@ -48,14 +48,13 @@ class Index extends Component { const { datas: dataSource, pageInfo: pageResult } = data; const { pageNum: current, pageSize, total } = pageResult; this.setState({ - dataSource: [...this.state.dataSource, ...dataSource], + dataSource: type ? dataSource : [...this.state.dataSource, ...dataSource], pageInfo: { ...pageInfo, current, pageSize, total } }, () => this.setState({ isMore: this.state.dataSource.length < total })); } }).catch(() => this.setState({ loading: false })); }; handleLoadMore = () => { - // 为测试效果临时使用 message const { pageInfo, isMore } = this.state; if (!isMore) return; const { current } = pageInfo; @@ -71,8 +70,9 @@ class Index extends Component { const { salaryYearMonth } = this.state; const [salaryStartYearMonth, salaryEndYearMonth] = salaryYearMonth; this.setState({ + pageInfo: { ...this.state.pageInfo, current: 1 }, salaryYearMonth: type === "salaryStartYearMonth" ? [val, salaryEndYearMonth] : [salaryStartYearMonth, val] - }, () => this.getMySalaryBillList()); + }, () => this.getMySalaryBillList(true)); }; render() {