qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工资单模板添加新增薪资项目大类的功能

This commit is contained in:
黎永顺 2023-02-02 14:46:39 +08:00
parent f53e8a733d
commit 7ea4a6f6a8
3 changed files with 337 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
View File

@ -62,4 +62,138 @@
}
}
}
.salarySetTitle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
}
//拖拽列表
.salaryItemSettingWrapper {
& > ul {
border: 1px solid #e5e5e5;
.wea-sortable-salary-item {
padding: 0;
margin: 0;
border: none;
cursor: default;
.salaryItemWrapper {
width: 100%;
.salaryItemHeader {
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
line-height: 32px;
background: #f5f5f5;
border-bottom: 1px solid #f2f2f2;
padding: 0 12px;
.icon-coms-Add-to {
cursor: pointer;
color: #5d9cec;
position: relative;
z-index: 999;
}
.titleWrapper {
display: flex;
align-items: center;
.salaryClassTitle {
font-weight: 400;
font-size: 12px;
color: #111;
vertical-align: middle;
}
.iconWrapper {
display: none;
align-items: center;
i {
padding-left: 8px;
color: #666;
cursor: pointer;
position: relative;
z-index: 999;
}
}
}
}
.salaryItemHeader:hover {
.iconWrapper {
display: flex;
}
}
.salaryItemContent {
padding: 4px 16px;
background: #fff;
min-height: 52px;
& > ul {
display: flex;
width: 100%;
flex-wrap: wrap;
li {
width: 25%;
.salaryItemList {
width: 100%;
.salaryItem:hover {
i.anticon-cross {
display: block;
}
}
.salaryItem {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 40px;
color: #000;
font-size: 12px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 8px;
.salaryItemName {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i.anticon-cross {
display: none;
cursor: pointer;
}
}
}
}
}
.empty {
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
}
}
}
}
}
}

135
pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js Normal file
View File

@ -0,0 +1,135 @@
/*
* Author: 黎永顺
* name: 工资单模板-薪资项目设置
* Description:
* Date: 2023/2/2
*/
import React, { Component } from "react";
import { toJS } from "mobx";
import { WeaSortable } from "ecCom";
import { Icon, Modal } from "antd";
class SalaryItemSettings extends Component {
constructor(props) {
super(props);
this.state = {
dataList: []
};
}
componentDidMount() {
this.setState({
dataList: _.map(toJS(this.props.dataSource), item => {
return {
...item,
id: item.groupId
};
})
});
}
/*
* Author: 黎永顺
* Description:删除薪资项目大类
* Params:
* Date: 2023/2/2
*/
handleDeleteClick = (group) => {
Modal.confirm({
title: "信息确认",
content: "确认删除",
onOk: () => {
let resultSalaryItemSet = [...toJS(this.props.dataSource)];
resultSalaryItemSet.map((sourceGroup, index) => {
if (sourceGroup.groupId === group.groupId) {
resultSalaryItemSet.splice(index, 1);
}
});
this.setState({
dataList: resultSalaryItemSet
}, () => {
this.props.onChangeSalaryItem(resultSalaryItemSet);
});
}
});
};
/*
* Author: 黎永顺
* Description: 删除薪资项目项
* Params:
* Date: 2023/2/2
*/
handleDeleteSalaryItem = (group, item) => {
let resultSalaryItemSet = [...toJS(this.props.dataSource)];
resultSalaryItemSet.map(sourceGroup => {
if (sourceGroup.groupId === group.groupId) {
sourceGroup.items.map((sourceItem, index) => {
if (sourceItem.id === item.id) {
sourceGroup.items.splice(index, 1);
}
});
}
});
this.setState({
dataList: resultSalaryItemSet
}, () => {
this.props.onChangeSalaryItem(resultSalaryItemSet);
});
};
render() {
const { onChangeSalaryItem } = this.props;
const { dataList } = this.state;
return (
<div className="salaryItemSettingWrapper">
<WeaSortable
datas={dataList}
onChange={(list) => onChangeSalaryItem(list)}
renderNodeItem={(item) => {
return <div className="salaryItemWrapper">
<div className="salaryItemHeader">
<span className="titleWrapper">
<span className="salaryClassTitle">{item.groupName}</span>
<span className="iconWrapper">
<i className="icon-coms-edit" onClick={() => alert(1)}/>
<i className="icon-coms-Delete" onClick={() => this.handleDeleteClick(item)}/>
</span>
</span>
<i className="icon-coms-Add-to" onClick={() => alert(2)}/>
</div>
<div className="salaryItemContent">
{
!_.isEmpty(item.items) ?
<WeaSortable
datas={item.items}
onChange={(items) => onChangeSalaryItem(
_.map(dataList, child => {
if (child.id === item.id) {
return { ...child, items };
}
return { ...child };
})
)}
renderNodeItem={(filed) => {
return <div className="salaryItemList">
<div className="salaryItem">
<div className="salaryItemName">{filed.name}</div>
<Icon type="cross" onClick={() => this.handleDeleteSalaryItem(item, filed)}/>
</div>
</div>;
}}
className="wea-sortable-salary-item"
/> :
<div className="empty">暂无数据</div>
}
</div>
</div>;
}}
className="wea-sortable-salary-item"
/>
</div>
);
}
}
export default SalaryItemSettings;

148
pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
View File

@ -1,8 +1,9 @@
import React from "react";
import { Icon, Modal, Radio, Switch } from "antd";
import { WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
import { Modal, Radio, Switch } from "antd";
import { WeaButtonIcon, WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
import { inject, observer } from "mobx-react";
import BackgroundUpload from "../components/backgroundUpload";
import SalaryItemSettings from "./salaryItemSettings";
import "./index.less";
@ -32,23 +33,8 @@ export default class ShowSettingForm extends React.Component {
setSalaryTemplateShowSet(request);
};
handleDownClick = (index) => {
const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
let downItem = salaryItemSet[index + 1];
let thisItem = salaryItemSet[index];
let resultSet = [...salaryItemSet];
resultSet[index] = downItem;
resultSet[index + 1] = thisItem;
setSalaryItemSet(resultSet);
};
handleUpClick = (index) => {
const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
let upItem = salaryItemSet[index - 1];
let thisItem = salaryItemSet[index];
let resultSet = [...salaryItemSet];
resultSet[index] = upItem;
resultSet[index - 1] = thisItem;
handleChangeSalaryItem = (resultSet) => {
const { payrollStore: { setSalaryItemSet } } = this.props;
setSalaryItemSet(resultSet);
};
@ -56,9 +42,9 @@ export default class ShowSettingForm extends React.Component {
const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
let resultSalaryItemSet = [...salaryItemSet];
resultSalaryItemSet.map(sourceGroup => {
if (sourceGroup.id == group.id) {
if (sourceGroup.groupId === group.groupId) {
sourceGroup.items.map((sourceItem, index) => {
if (sourceItem.id == item.id) {
if (sourceItem.id === item.id) {
sourceGroup.items.splice(index, 1);
}
});
@ -67,18 +53,6 @@ export default class ShowSettingForm extends React.Component {
setSalaryItemSet(resultSalaryItemSet);
};
handleDeleteClick = (index) => {
Modal.confirm({
title: "信息确认",
content: "确认删除",
onOk: () => {
const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
let resultSalaryItemSet = [...salaryItemSet];
resultSalaryItemSet.splice(index, 1);
setSalaryItemSet(resultSalaryItemSet);
}
});
};
render() {
const { payrollStore, id } = this.props;
@ -164,54 +138,68 @@ export default class ShowSettingForm extends React.Component {
</WeaFormItem>
</WeaSearchGroup>
<WeaSearchGroup title="薪资项目设置" items={[]} needTigger showGroup>
{
salaryItemSet.map((group, index) => (
<div className="configItemWrapper">
<div className="configTitle">{group.groupName}
{
index < salaryItemSet.length - 1 &&
<Icon
type="caret-down"
style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}
onClick={() => {
this.handleDownClick(index);
}}
/>
}
{
index > 0 &&
<Icon
type="caret-up"
style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}
onClick={() => {
this.handleUpClick(index);
}}
/>
}
<i
className="icon-coms-Delete"
style={{ cursor: "pointer", color: "#666", marginLeft: "10px" }}
onClick={() => {
this.handleDeleteClick(index);
}}
/>
</div>
<div className="configContent">
{group.items.map(item => (
<span className="editItem">{item.name}
<Icon
type="cross" style={{ cursor: "pointer" }}
onClick={() => {
this.handleDeleteItem(group, item);
}}
/>
</span>
))}
</div>
</div>
))
<WeaSearchGroup
title={
<div className="salarySetTitle">
<span>薪资项目设置</span>
<WeaButtonIcon buttonType="add" type="primary"/>
</div>
}
items={[]}
needTigger
showGroup
>
<SalaryItemSettings
dataSource={salaryItemSet}
onChangeSalaryItem={this.handleChangeSalaryItem}
/>
{/*{*/}
{/* salaryItemSet.map((group, index) => (*/}
{/* <div className="configItemWrapper">*/}
{/* <div className="configTitle">{group.groupName}*/}
{/* {*/}
{/* index < salaryItemSet.length - 1 &&*/}
{/* <Icon*/}
{/* type="caret-down"*/}
{/* style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}*/}
{/* onClick={() => {*/}
{/* this.handleDownClick(index);*/}
{/* }}*/}
{/* />*/}
{/* }*/}
{/* {*/}
{/* index > 0 &&*/}
{/* <Icon*/}
{/* type="caret-up"*/}
{/* style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}*/}
{/* onClick={() => {*/}
{/* this.handleUpClick(index);*/}
{/* }}*/}
{/* />*/}
{/* }*/}
{/* <i*/}
{/* className="icon-coms-Delete"*/}
{/* style={{ cursor: "pointer", color: "#666", marginLeft: "10px" }}*/}
{/* onClick={() => {*/}
{/* this.handleDeleteClick(index);*/}
{/* }}*/}
{/* />*/}
{/* </div>*/}
{/* <div className="configContent">*/}
{/* {group.items.map(item => (*/}
{/* <span className="editItem">{item.name}*/}
{/* <Icon*/}
{/* type="cross" style={{ cursor: "pointer" }}*/}
{/* onClick={() => {*/}
{/* this.handleDeleteItem(group, item);*/}
{/* }}*/}
{/* />*/}
{/* </span>*/}
{/* ))}*/}
{/* </div>*/}
{/* </div>*/}
{/* ))*/}
{/*}*/}
</WeaSearchGroup>
</div>
);