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

薪资档案发薪员工页面的调薪页面重构

This commit is contained in:
黎永顺 2023-09-04 16:48:36 +08:00
parent 242b96321a
commit 6043159976
7 changed files with 542 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
pc4mobx/hrmSalary/pages/payrollFiles/index.js
View File

@ -30,8 +30,8 @@ import AllWithoutPay from "./components/allWithoutPay";
import BatchSuspendsPay from "./components/batchSuspendsPay";
import SlideModalTitle from "../../components/slideModalTitle";
import SalaryFileViewSlide from "../salaryFile/saralyFileViewSlide";
import ChangeSalaryModal from "../salaryFile/changeSalaryModal";
import { sysinfo } from "../../apis/ruleconfig";
import SalaryArchiveEditAdjLogRecord from "../salaryFile/salaryArchiveEditAdjLogRecord";
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;
@ -77,7 +77,9 @@ class Index extends Component {
subcompanyIds: ""
},
salaryAdjustmentInfo: {},
changeSalaryVisible: false,
adjLogRecordDialog: {
visible: false, title: "", id: "", salaryArchiveId: ""
},
noPayDate: "",
slideParams: {
visible: false,
@ -624,7 +626,12 @@ class Index extends Component {
}
if (showOperateBtn && (selectedKey === "fixed" || selectedKey === "ext")) {
arrList.push(<Button type="primary" onClick={() => {
this.setState({ changeSalaryVisible: true });
this.setState({
adjLogRecordDialog: {
...this.state.adjLogRecordDialog,
visible: true, title: getLabel(542686, "调薪"), salaryArchiveId: this.state.slideParams.id
}
});
}}>调薪</Button>);
}
selectedKey !== "stop" && arrList.push(<Button type="primary" onClick={this.handleSave}>保存</Button>);
@ -719,7 +726,7 @@ class Index extends Component {
pageInfo,
showSearchAd,
slideParams,
changeSalaryVisible,
adjLogRecordDialog,
paysetParams,
extEmpsWitch
} = this.state;
@ -884,15 +891,14 @@ class Index extends Component {
}}
/>
)}
{changeSalaryVisible && (
<ChangeSalaryModal
currentId={slideParams.id}
visible={changeSalaryVisible}
onCancel={() => {
this.setState({ changeSalaryVisible: false });
}}
/>
)}
<SalaryArchiveEditAdjLogRecord
{...adjLogRecordDialog}
onCancel={() => this.setState({
adjLogRecordDialog: {
adjLogRecordDialog, visible: false, title: "", id: "", salaryArchiveId: ""
}
})}
/>
</div>
);
}

354
pc4mobx/hrmSalary/pages/salaryFile/columns.js
View File

@ -1,175 +1,203 @@
export const columns = [
{
title: "姓名",
dataIndex: 'title',
key: 'title',
},
{
title: "个税扣缴义务人",
dataIndex: 'title',
key: 'title',
},
{
title: "部门",
dataIndex: 'title',
key: 'title',
},
{
title: "手机号",
dataIndex: 'title',
key: 'title',
},
{
title: "员工状态",
dataIndex: 'title',
key: 'title',
},
{
title: "基本工资",
dataIndex: 'title',
key: 'title',
},
{
title: "操作",
dataIndex: 'cz',
key: 'cz',
}
]
{
title: "姓名",
dataIndex: "title",
key: "title"
},
{
title: "个税扣缴义务人",
dataIndex: "title",
key: "title"
},
{
title: "部门",
dataIndex: "title",
key: "title"
},
{
title: "手机号",
dataIndex: "title",
key: "title"
},
{
title: "员工状态",
dataIndex: "title",
key: "title"
},
{
title: "基本工资",
dataIndex: "title",
key: "title"
},
{
title: "操作",
dataIndex: "cz",
key: "cz"
}
];
export const changeSalaryModalColumns = [
{
title: '薪资项目',
dataIndex: 'title',
key: 'title'
},
{
title: '调整前',
dataIndex: 'title',
key: 'title'
},
{
title: '调整后',
dataIndex: 'title',
key: 'title'
}
]
export const adjCondition = [
{
items: [
{
colSpan: 1,
conditionType: "DATEPICKER",
domkey: ["effectiveTime"],
fieldcol: 18,
label: "生效日期",
lanId: 19548,
labelcol: 6,
rules: "required",
value: "",
viewAttr: 3
},
{
colSpan: 1,
checkbox: false,
checkboxValue: false,
conditionType: "SELECT",
domkey: ["adjustReason"],
fieldcol: 18,
label: "调整原因",
lanId: 1897,
labelcol: 6,
options: [],
rules: "required",
viewAttr: 3
},
{
colSpan: 1,
conditionType: "INPUT",
domkey: ["description"],
fieldcol: 18,
label: "说明",
lanId: 25734,
labelcol: 6,
value: "",
viewAttr: 2
}
],
title: "调薪信息",
defaultshow: true
}
];
export const slideSalaryItemColumns = [
{
title: "姓名",
dataIndex: 'title',
key: 'title'
},
{
title: "员工状态",
dataIndex: 'title',
key: 'title'
},
{
title: "部门",
dataIndex: 'title',
key: 'title'
},
{
title: "薪资项目",
dataIndex: 'title',
key: 'title'
},
{
title: "调整前",
dataIndex: 'title',
key: 'title'
},
{
title: "调整后",
dataIndex: 'title',
key: 'title'
},
{
title: "调整原因",
dataIndex: 'title',
key: 'title'
},
{
title: "生效日期",
dataIndex: 'title',
key: 'title'
},
{
title: "操作人",
dataIndex: 'title',
key: 'title'
},
{
title: "操作日期",
dataIndex: 'title',
key: 'title'
},
{
title: "说明",
dataIndex: 'title',
key: 'title'
}
]
{
title: "姓名",
dataIndex: "title",
key: "title"
},
{
title: "员工状态",
dataIndex: "title",
key: "title"
},
{
title: "部门",
dataIndex: "title",
key: "title"
},
{
title: "薪资项目",
dataIndex: "title",
key: "title"
},
{
title: "调整前",
dataIndex: "title",
key: "title"
},
{
title: "调整后",
dataIndex: "title",
key: "title"
},
{
title: "调整原因",
dataIndex: "title",
key: "title"
},
{
title: "生效日期",
dataIndex: "title",
key: "title"
},
{
title: "操作人",
dataIndex: "title",
key: "title"
},
{
title: "操作日期",
dataIndex: "title",
key: "title"
},
{
title: "说明",
dataIndex: "title",
key: "title"
}
];
export const slieAgentColumns = [
{
title: "姓名",
dataIndex: 'title',
key: 'title'
},
{
title: "员工状态",
dataIndex: 'title',
key: 'title'
},
{
title: "部门",
dataIndex: 'title',
key: 'title'
},
{
title: "调整前",
dataIndex: 'title',
key: 'title'
},
{
title: "调整后",
dataIndex: 'title',
key: 'title'
},
{
title: "调整原因",
dataIndex: 'title',
key: 'title'
},
{
title: "生效日期",
dataIndex: 'title',
key: 'title'
},
{
title: "操作人",
dataIndex: 'title',
key: 'title'
},
{
title: "操作日期",
dataIndex: 'title',
key: 'title'
},
{
title: "说明",
dataIndex: 'title',
key: 'title'
}
]
{
title: "姓名",
dataIndex: "title",
key: "title"
},
{
title: "员工状态",
dataIndex: "title",
key: "title"
},
{
title: "部门",
dataIndex: "title",
key: "title"
},
{
title: "调整前",
dataIndex: "title",
key: "title"
},
{
title: "调整后",
dataIndex: "title",
key: "title"
},
{
title: "调整原因",
dataIndex: "title",
key: "title"
},
{
title: "生效日期",
dataIndex: "title",
key: "title"
},
{
title: "操作人",
dataIndex: "title",
key: "title"
},
{
title: "操作日期",
dataIndex: "title",
key: "title"
},
{
title: "说明",
dataIndex: "title",
key: "title"
}
];
export const dataSource = [
{
title: "测试"
}
{
title: "测试"
}
];

54
pc4mobx/hrmSalary/pages/salaryFile/index.less
View File

@ -73,7 +73,6 @@
}
}
.salaryFileSlide {
padding: 10px 20px;
@ -125,7 +124,6 @@
}
}
.salaryFileTabWrapper {
.searchPanel {
position: absolute;
@ -169,3 +167,55 @@
}
}
}
.adjustItem-layout {
.ant-table-fixed td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.adjLogRecordDialogContent {
background: #f6f6f6;
padding: 16px;
height: 100%;
overflow-y: auto;
.empty {
text-align: center;
background: transparent;
margin-bottom: 20px;
padding: 30px 50px;
}
.wea-search-group:first-child {
margin-bottom: 16px;
}
.wea-search-group {
background: #FFF;
padding: 0;
border: 1px solid #e5e5e5;
border-bottom: none;
}
.wea-content, .wea-form-cell {
padding: 0;
}
.wea-form-item {
padding: 5px 16px;
border-bottom: 1px solid #e5e5e5;
}
.wea-select, .ant-select {
width: 100%;
}
.ant-select-selection {
width: 100%;
height: 30px;
border-radius: 0;
}
}

220
pc4mobx/hrmSalary/pages/salaryFile/salaryArchiveEditAdjLogRecord.js Normal file
View File

@ -0,0 +1,220 @@
/*
* Author: 黎永顺
* name: 薪资档案-调薪
* Description:
* Date: 2023/9/4
*/
import React, { Component } from "react";
import { WeaDialog, WeaLocaleProvider, WeaSearchGroup, WeaTableEdit, WeaTools } from "ecCom";
import { Button, message, Spin } from "antd";
import {
editSingleSalaryItem,
getSalaryItemAdjustBeforeValue,
getSalaryItemForm,
getSingleSalaryItemInfo,
saveSalaryItem
} from "../../apis/archive";
import { inject, observer } from "mobx-react";
import { adjCondition } from "./columns";
import { getDomkes, getSearchs } from "../../util";
import moment from "moment";
const { getLabel } = WeaLocaleProvider;
const getKey = WeaTools.getKey;
const APIFox = {
save: saveSalaryItem,
edit: editSingleSalaryItem,
saveForm: getSalaryItemForm,
editForm: getSingleSalaryItemInfo
};
@inject("salaryFileStore")
@observer
class SalaryArchiveEditAdjLogRecordDialog extends Component {
constructor(props) {
super(props);
this.state = {
conditions: [], loading: false, saveLoading: false,
salaryArchiveItemDetail: {}, canOperator: false
};
}
componentWillReceiveProps(nextProps, nextContext) {
const { id, visible, salaryFileStore: { adjForm, initAdjForm } } = nextProps;
if (nextProps.visible !== this.props.visible && visible) {
this.getSingleSalaryItemInfo(nextProps);
} else {
adjForm.resetForm();
initAdjForm();
}
}
getSingleSalaryItemInfo = (props) => {
const { salaryFileStore: { adjForm }, id, salaryArchiveId: salaryArchiveItemId } = props;
this.setState({ loading: true });
APIFox[id ? "editForm" : "saveForm"](id ? { id } : { salaryArchiveItemId })
.then(({ status, data }) => {
this.setState({ loading: false });
if (status) {
const { salaryArchiveItemForm, salaryArchiveItemDetail, canOperator } = data;
const { adjustReasonList } = salaryArchiveItemForm;
this.setState({
canOperator, salaryArchiveItemDetail,
conditions: _.map(adjCondition, item => {
return {
...item,
title: getLabel(111, "调薪信息"),
items: _.map(item.items, o => {
if (getKey(o) === "adjustReason") {
return {
...o,
options: _.map(adjustReasonList, it => ({ key: it.id, showname: it.content }))
};
}
return { ...o };
})
};
})
}, () => {
adjForm.initFormFields(this.state.conditions);
_.map(getDomkes(this.state.conditions), domkey => {
adjForm.updateFields({
[domkey]: salaryArchiveItemForm[domkey] || ""
});
});
});
}
}).catch(() => this.setState({ loading: false }));
};
getSalaryItemAdjustBeforeValue = (salaryItemId) => {
const payload = {
salaryArchiveId: this.props.salaryArchiveId,
salaryItemId
};
getSalaryItemAdjustBeforeValue(payload).then(({ status, data }) => {
if (status) {
const { salaryArchiveItemDetail } = this.state;
const { list } = salaryArchiveItemDetail;
this.setState({
salaryArchiveItemDetail: {
...salaryArchiveItemDetail,
list: _.map(list, o => {
if (o.salaryItem === salaryItemId) {
return { ...o, salaryBefore: data };
}
return { ...o };
})
}
});
}
});
};
save = () => {
const { salaryFileStore: { adjForm, fetchSingleSalaryItemList, getArchiveForm } } = this.props;
const { pass } = this.tableEdit.refs.edit.doRequiredCheck();
adjForm.validateForm().then(f => {
if (f.isValid) {
if (!pass) return;
const { salaryArchiveId, id: salaryArchiveItemId } = this.props;
const { salaryArchiveItemDetail, canOperator } = this.state;
const { list } = salaryArchiveItemDetail;
let payload = {
...adjForm.getFormParams(), salaryArchiveId,
effectiveTime: moment(adjForm.getFormParams().effectiveTime).format("YYYY-MM-DD"),
salaryArchiveItems: _.map(list, o => ({ salaryItemId: o.salaryItem, adjustValue: o.adjustAfter }))
};
if (salaryArchiveItemId) {
payload = { ...payload, canOperator, salaryArchiveItemId };
}
this.setState({ saveLoading: true });
APIFox[salaryArchiveItemId ? "edit" : "save"](payload).then(({ status, errormsg }) => {
this.setState({ saveLoading: false });
if (status) {
message.success(getLabel(22619, "保存成功！"));
this.props.onCancel();
fetchSingleSalaryItemList({ salaryArchiveId });
getArchiveForm(salaryArchiveId);
} else {
message.error(errormsg);
}
}).catch(() => this.setState({ saveLoading: false }));
} else {
f.showErrors();
}
});
};
render() {
const { salaryFileStore: { adjForm }, id } = this.props;
const { loading, saveLoading, salaryArchiveItemDetail, conditions } = this.state;
const { salaryItemList, list } = salaryArchiveItemDetail;
const adjColumns = [
{
title: "薪资项目",
dataIndex: "salaryItem",
key: "salaryItem",
com: [{
options: _.map(salaryItemList, o => ({ key: o.id, showname: o.content })),
type: "SELECT", viewAttr: id ? 1 : 3, key: "salaryItem",
onChange: (v) => this.getSalaryItemAdjustBeforeValue(v)
}],
colSpan: 1,
width: "40%"
},
{
title: getLabel(111, "调整前"),
dataIndex: "salaryBefore",
key: "salaryBefore",
com: [{ label: "", type: "INPUT", viewAttr: 1, key: "salaryBefore" }],
colSpan: 1,
width: "30%"
},
{
title: getLabel(111, "调整后"),
dataIndex: "adjustAfter",
key: "adjustAfter",
com: [{ label: "", type: "INPUTNUMBER", precision: 3, viewAttr: 3, key: "adjustAfter" }],
colSpan: 1,
width: "30%"
}
];
return (
<WeaDialog
{...this.props}
scalable hasScroll className="declareResultDialog" initLoadCss
style={{
width: 800,
height: 606.6,
minHeight: 200,
minWidth: 380,
maxHeight: "80%",
maxWidth: "80%",
overflow: "hidden",
transform: "translate(0px, 0px)"
}}
buttons={[<Button type="primary" onClick={this.save} loading={saveLoading}>{getLabel(537558, "保存")}</Button>]}
>
<div className="adjLogRecordDialogContent">
{
!loading ? <React.Fragment>
{getSearchs(adjForm, conditions, 1)}
<WeaSearchGroup title={getLabel(543333, "调薪明细")} showGroup needTigger={false}>
<WeaTableEdit
ref={dom => this.tableEdit = dom} deleteConfirm
columns={adjColumns} datas={list} showCopy={false}
onChange={o => this.setState({
salaryArchiveItemDetail: {
...salaryArchiveItemDetail, list: o
}
})}
/>
</WeaSearchGroup>
</React.Fragment> : <div className="empty"><Spin/></div>
}
</div>
</WeaDialog>
);
}
}
export default SalaryArchiveEditAdjLogRecordDialog;

97
pc4mobx/hrmSalary/pages/salaryFile/salaryItemChangeList.js
View File

@ -1,10 +1,11 @@
import React from "react";
import { Menu, message, Modal, Popover } from "antd";
import { WeaLocaleProvider, WeaTable } from "ecCom";
import { inject, observer } from "mobx-react";
import ChangeSalaryModal from "./changeSalaryModal";
import { deleteSalaryItem } from "../../apis/archive";
import UnifiedTable from "../../components/UnifiedTable";
import SalaryArchiveEditAdjLogRecord from "./salaryArchiveEditAdjLogRecord";
const { getLabel } = WeaLocaleProvider;
@inject("salaryFileStore")
@observer
export default class SalaryItemChangeList extends React.Component {
@ -12,6 +13,9 @@ export default class SalaryItemChangeList extends React.Component {
super(props);
this.state = {
changeSalaryVisible: false,
adjLogRecordDialog: {
visible: false, title: "", id: "", salaryArchiveId: ""
},
recordId: ""
};
this.searchParams = {};
@ -25,11 +29,11 @@ export default class SalaryItemChangeList extends React.Component {
handleEdit = (record) => {
this.setState({
recordId: record.id
}, () => {
this.setState({
changeSalaryVisible: true
});
adjLogRecordDialog: {
...this.state.adjLogRecordDialog,
visible: true, title: getLabel(542686, "调薪"), id: record.id,
salaryArchiveId: this.props.id
}
});
};
deleteSalaryItem = (salaryArchiveItemId) => {
@ -58,11 +62,30 @@ export default class SalaryItemChangeList extends React.Component {
const { salaryFileStore: { singleSalaryItemList }, selectedKey } = this.props;
let columns = [];
if (singleSalaryItemList.columns) {
columns = [...singleSalaryItemList.columns];
columns = _.map([...singleSalaryItemList.columns], o => {
const { dataIndex } = o;
if (dataIndex === "adjustItem") {
return { ...o, width: 100, fixed: "left", render: text => (<span title={text}>{text}</span>) };
}
let width = "";
switch (o) {
case "adjustBefore":
case "adjustAfter":
case "operateTime":
width = "20%";
break;
case "effectiveTime":
width = "15%";
break;
default:
width = "10%";
break;
}
return { ...o, width, render: text => (<span title={text}>{text}</span>) };
});
if (selectedKey === "fixed") {
columns = [...columns, {
dataIndex: "operate",
title: "操作",
dataIndex: "operate", fixed: "right", width: 120, title: "操作",
render: (text, record) => {
return <div className="optWrapper">
<a href="javascript:void(0);" className="mr10" onClick={() => this.handleEdit(record)}>编辑</a>
@ -90,45 +113,29 @@ export default class SalaryItemChangeList extends React.Component {
}
render() {
const { salaryFileStore } = this.props;
const { salaryFileStore } = this.props, { adjLogRecordDialog } = this.state;
const { singleSalaryItemList } = salaryFileStore;
const pageInfo = { current: singleSalaryItemList.pageNum, pageSize: 10, total: singleSalaryItemList.total };
const pagination = {
...pageInfo,
showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
showQuickJumper: true,
onChange: current => this.handlePageChange(current)
};
return (
<div>
<UnifiedTable
columns={
_.map(this.getColumns(), item => {
if (item.dataIndex !== "operate") {
return {
...item,
render: (text) => {
return <span className="ellipsis" title={text}>{text}</span>;
}
};
}
return { ...item };
})
}
dataSource={singleSalaryItemList.list ? singleSalaryItemList.list : []}
pagination={{
onChange: (value) => {
this.handlePageChange(value);
},
total: singleSalaryItemList.total,
showTotal: (total) => `共 ${total} 条`,
current: singleSalaryItemList.pageNum
}}
xWidth={this.getColumns().length * 100}
<WeaTable
columns={this.getColumns()} dataSource={singleSalaryItemList.list ? singleSalaryItemList.list : []}
pagination={pagination} scroll={{ x: 800 }} className="adjustItem-layout"
/>
<SalaryArchiveEditAdjLogRecord
{...adjLogRecordDialog}
onCancel={() => this.setState({
adjLogRecordDialog: {
adjLogRecordDialog, visible: false, title: "", id: "", salaryArchiveId: ""
}
})}
/>
{
this.state.changeSalaryVisible && <ChangeSalaryModal
currentId={this.props.id}
recordId={this.state.recordId}
visible={this.state.changeSalaryVisible}
onCancel={() => {
this.setState({ changeSalaryVisible: false });
}}
/>
}
</div>
);
}

5
pc4mobx/hrmSalary/stores/salaryFile.js
View File

@ -9,6 +9,9 @@ import { notNull } from "../util/validate";
const { TableStore } = WeaTableNew;
export class salaryFileStore {
@observable adjForm = new WeaForm(); // 调薪form
@observable tableStore = new TableStore(); // new table
@observable form = new WeaForm(); // nrew 一个form
@observable condition = []; // 存储后台得到的form数据
@ -41,6 +44,8 @@ export class salaryFileStore {
setSalaryIncreaseUrl = data => (this.salaryIncreaseUrl = data);
@action("设置薪资档案项")
setAdjustSalaryItems = data => (this.adjustSalaryItems = data);
@action("调薪初始化form")
initAdjForm = () => (this.adjForm = new WeaForm());
// ** 设置导入参数 start **
@action
setPreviewDataSource = (previewDataSource) => {

3
pc4mobx/hrmSalary/util/index.js
View File

@ -106,3 +106,6 @@ export const format_with_regex = (number) => {
});
};
export const getDomkes = (conditions) => {
return _.map(conditions[0].items, it => it.domkey[0]);
};