diff --git a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/calcAnchorList.js b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/calcAnchorList.js new file mode 100644 index 00000000..a8cecca3 --- /dev/null +++ b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/calcAnchorList.js @@ -0,0 +1,110 @@ +/* + * 核算编辑 + * 数据查看锚点 + * @Author: 黎永顺 + * @Date: 2025/2/10 + * @Wechat: + * @Email: 971387674@qq.com + * @description: +*/ +import React, { Component } from "react"; +import { WeaLocaleProvider } from "ecCom"; +import classnames from "classnames"; + +const getLabel = WeaLocaleProvider.getLabel; + +class CalcAnchorList extends Component { + constructor(props) { + super(props); + this.state = { + collapsed: false, currentIndex: 0 + }; + this.isClickRef = null; + this.timerRef = null; + } + + componentDidMount() { + document.getElementById("salary_anchor_area").addEventListener("scroll", this.handlerScroll); + } + + componentWillReceiveProps(nextProps, nextContext) { + if (nextProps.visible !== this.props.visible && !nextProps.visible) this.setState({ + collapsed: false, + currentIndex: 0 + }); + } + + componentWillUnmount() { + document.getElementById("salary_anchor_area").removeEventListener("scroll", this.handlerScroll); + } + + handlerScroll = () => { + // 点击锚点时，不执行滚动函数 + if (this.isClickRef) return; + // 获取滚动容器的滚动高度（这里相对于#salary_anchor_area滚动的） + const scrollTop = document.getElementById("salary_anchor_area").scrollTop; + // 获取所有wea-search-group anchor_开头的元素集合 + const contentList = document.querySelectorAll("[class^='wea-search-group anchor_']"); + const offsetTopArr = []; + contentList.forEach((item) => { + // 获取每个wea-search-group anchor_开头的元素的offsetTop + offsetTopArr.push(item.offsetTop); + }); + for (let i = 0; i < offsetTopArr.length; i++) { + // 当滚动条高度达到对应wea-search-group anchor_开头的元素的滚动高度、则将锚点设置为高亮状态 + if (scrollTop + 190 >= offsetTopArr[i]) this.setState({ currentIndex: i }); + } + }; + onClickAnchor = (item, index) => { + const anchorElement = document.getElementById("salary_anchor_area"); + const el = document.querySelector(`.anchor_${item.salarySobItemGroupId}`); + if (el) { + anchorElement.scroll({ top: el.offsetTop, behavior: "smooth" }); + } + this.setState({ currentIndex: index }); + // 点击时设置为true,为了防止同时执行滚动事件 + this.isClickRef = true; + // 清除定时器，防止滚动事件触发、出现走马灯闪烁问题 + if (this.timerRef) clearTimeout(this.timerRef); + this.timerRef = setTimeout(() => { + this.isClickRef = false; + }, 1000); + }; + + render() { + const { collapsed, currentIndex } = this.state, { datas } = this.props; + return ( +
+
+ { + collapsed ? +
+ this.setState({ collapsed: !collapsed })}/> +
: + +
+ this.setState({ collapsed: !collapsed })}/> +
+
+
+ +
+ {_.map(datas, (o, i) => ( +
this.onClickAnchor(o, i)}> + {o.salarySobItemGroupName} +
) + )} +
+ + } +
+
+ ); + } +} + +export default CalcAnchorList; diff --git a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcTable.js b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcTable.js index aa6baf65..c84dce5f 100644 --- a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcTable.js +++ b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcTable.js @@ -30,7 +30,7 @@ class EditCalcTable extends Component { this.state = { loading: false, pageInfo: { current: 1, pageSize: 10, total: 0 }, selectedRowKeys: [], progressVisible: false, progress: 0, - salaryCalcSlide: { visible: false, id: "" }, originPayloadData: {}, + salaryCalcSlide: { visible: false, id: "", viewAttr: 2 }, originPayloadData: {}, batchUpdateDialog: { visible: false, salaryAcctRecordId: "", idList: [], salaryItemId: "", conditions: [], pattern: 0, dataType: "" @@ -73,9 +73,9 @@ class EditCalcTable extends Component { this.updateEmpLockStatus({ ...params }); break; case "EDIT": - const { id: salaryCalcId } = params; + const { id: salaryCalcId, showSee } = params; this.setState({ - salaryCalcSlide: { visible: true, id: salaryCalcId } + salaryCalcSlide: { visible: true, id: salaryCalcId, viewAttr: showSee ? 1 : 2 } }); break; case "DIAGRAM": @@ -238,7 +238,7 @@ class EditCalcTable extends Component { "总计": getLabel(523, "总计"), "批量解锁": getLabel(111, "批量解锁"), "批量锁定": getLabel(111, "批量锁定"), "批量更新": getLabel(111, "批量更新"), "查看拓扑图": getLabel(111, "查看拓扑图"), "锁定": getLabel(111, "锁定"), - "解锁": getLabel(111, "解锁") + "解锁": getLabel(111, "解锁"), "查看": getLabel(111, "查看") }; this.setState({ originPayloadData: { ...payload, i18n } }); const childFrameObj = document.getElementById("atdTable"); @@ -269,7 +269,7 @@ class EditCalcTable extends Component { const sumRowlistUrl = this.props.showTotalCell ? "/api/bs/hrmsalary/salaryacct/acctresult/sum" : ""; this.postMessageToChild({ dataSource, pageInfo, selectedRowKeys, showTotalCell: this.props.showTotalCell, sumRowlistUrl, payload, - calcDetail, + calcDetail, showSee: true, columns: _.every(traverse(columns, calcDetail), (it, idx) => !it.fixed) ? _.map(traverse(columns, calcDetail), (it, idx) => ({ ...it, fixed: idx < 2 ? "left" : false @@ -304,10 +304,7 @@ class EditCalcTable extends Component { /> this.setState({ - salaryCalcSlide: { - visible: false, - id: "" - } + salaryCalcSlide: { visible: false, id: "", viewAttr: 2 } }, () => isFresh === "true" && this.queryCalcResultList())}/> { progressVisible && diff --git a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editSalaryCalcSlide.js b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editSalaryCalcSlide.js index 235bac13..9da20706 100644 --- a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editSalaryCalcSlide.js +++ b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editSalaryCalcSlide.js @@ -12,9 +12,9 @@ import PayrollItemsTable from "../../../../calculateDetail/payrollItemsTable"; import IssuedAndReissueTable from "../../../../calculateDetail/issuedAndReissueTable"; import { acctresultDetail, saveAcctResult } from "../../../../../apis/calculate"; import { toDecimal_n } from "../../../../../util"; +import CalcAnchorList from "./calcAnchorList"; import "./index.less"; - const getLabel = WeaLocaleProvider.getLabel; class EditSalaryCalcSlide extends Component { @@ -29,7 +29,7 @@ class EditSalaryCalcSlide extends Component { componentWillReceiveProps(nextProps, nextContext) { if (nextProps.visible !== this.props.visible && nextProps.visible) this.acctresultDetail(nextProps.id); - if (nextProps.visible !== this.props.visible && !nextProps.visible) this.setState({ selectedKey: "0" }); + if (nextProps.visible !== this.props.visible && !nextProps.visible) this.setState({ selectedKey: "0" }, () => document.getElementById("salary_anchor_area").scrollTop = 0); } acctresultDetail = (id) => { @@ -43,14 +43,17 @@ class EditSalaryCalcSlide extends Component { }); }; renderTitle = () => { - const { loading } = this.state; + const { loading } = this.state, { viewAttr } = this.props; return
-
{getLabel(543559, "编辑薪资")}
+
{viewAttr === 2 ? getLabel(543559, "编辑薪资") : getLabel(111, "查看薪资")}
- + { + viewAttr === 2 && + + }
; }; @@ -139,7 +142,9 @@ class EditSalaryCalcSlide extends Component { className="salary-calculate-esf-layout" {...this.props} top={0} width={60} height={100} measure={"%"} direction={"right"} title={this.renderTitle()} - content={
+ content={
+ {/*锚点*/} + this.setState({ baseInfo })}/> { selectedKey === "0" && _.map(itemsByGroup, item => { - return ; + return ; }) } { selectedKey === "1" && diff --git a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/index.less b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/index.less index e2d8ce9b..4e3fb3b4 100644 --- a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/index.less +++ b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/index.less @@ -142,6 +142,7 @@ height: 100%; .salary-calculate-esf-area { + position: relative; background: #f6f6f6; height: 100%; overflow-y: auto; @@ -191,6 +192,109 @@ .wea-search-group { padding: 0; } + + //锚点按钮 + .anchor-list-collapsed { + padding: 0 !important; + } + + .anchor-list-wrapper { + position: absolute; + right: 0; + margin: 10px 15px 20px; + padding: 8px 10px; + overflow: auto; + background-color: #fff; + box-shadow: 0 3px 12px 0 rgba(0, 0, 0, .12); + border-radius: 3px; + cursor: pointer; + + .anchor-list-collapsed-btn { + opacity: .5; + background: #000; + color: #fff; + border-radius: 3px; + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + } + + .anchor-list-header { + display: flex; + align-items: center; + justify-content: flex-end; + min-width: 130px; + padding: 5px; + } + + .anchor-list { + padding: 0 10px; + position: relative; + margin-top: 10px; + transition: margin-top .3s; + + .anchor-list-ink { + position: absolute; + top: 0; + left: 5px; + height: 100%; + + .anchor-list-ink-ball.visible { + display: inline-block; + } + + .anchor-list-ink-ball { + position: absolute; + left: 50%; + display: none; + width: 3px; + height: 8px; + background-color: #5d9cec; + border: 1.5px solid #5d9cec; + border-radius: 8px; + transform: translateX(-50%); + transition: top .3s ease-in-out; + } + } + + .anchor-list-ink:before { + position: relative; + display: block; + width: 1px; + height: 100%; + margin: 0 auto; + background-color: #f0f0f0; + content: " "; + } + + .anchor-list-link { + padding: 7px 0 7px 10px; + line-height: 1.143; + + .anchor-list-link-title { + position: relative; + display: block; + overflow: hidden; + color: #666; + white-space: nowrap; + text-overflow: ellipsis; + transition: all .3s; + cursor: pointer; + outline: none; + text-decoration: none; + background-color: transparent; + } + } + + .anchor-list-link-active > .anchor-list-link-title { + color: #5d9cec; + } + } + } + } } } diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/issuedAndReissueTable.js b/pc4mobx/hrmSalary/pages/calculateDetail/issuedAndReissueTable.js index bf1c1286..65189b7e 100644 --- a/pc4mobx/hrmSalary/pages/calculateDetail/issuedAndReissueTable.js +++ b/pc4mobx/hrmSalary/pages/calculateDetail/issuedAndReissueTable.js @@ -29,10 +29,11 @@ class IssuedAndReissueTable extends Component { /> , render: (text, record) => { - const { canEdit, pattern } = record; + const { canEdit, pattern } = record, { viewAttr } = this.props; return onChangeIssueReissueValue(record.salaryItemName, value, "issuedAndReissueItems")} diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/payrollItemsTable.js b/pc4mobx/hrmSalary/pages/calculateDetail/payrollItemsTable.js index 9d2ddfce..9f196d5f 100644 --- a/pc4mobx/hrmSalary/pages/calculateDetail/payrollItemsTable.js +++ b/pc4mobx/hrmSalary/pages/calculateDetail/payrollItemsTable.js @@ -37,8 +37,9 @@ class PayrollItemsTable extends Component { , width: "20%", render: (text, record) => { - const { canEdit, dataType, pattern } = record; + const { canEdit, dataType, pattern } = record, { viewAttr } = this.props; return dataType === "number" ? : onChangeIssueReissueValue(record.salaryItemId, value, "itemsByGroup", salarySobItemGroupId)} />; } @@ -66,7 +68,7 @@ class PayrollItemsTable extends Component { } ]; return ( - +