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

统一所有页面你的弹框以及抽屉头部组件,样式bug的修改

This commit is contained in:
18652063575 2022-09-15 11:08:13 +08:00
parent 0cec0873fe
commit 27e54073c6
32 changed files with 1072 additions and 900 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
pc4mobx/hrmSalary/apis/sysconfig.js Normal file
View File

@ -0,0 +1,10 @@
export const getSysList = params => {
return fetch('/api/bs/hrmsalary/sys/list', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
}).then(res => res.json())
};

117
pc4mobx/hrmSalary/components/customForm/index.js
View File

@ -1,64 +1,63 @@
import React from 'react'
import { Checkbox, Radio, Row, Col } from "antd"
import { WeaInput } from "ecCom"
import RequiredLabelTip from '../requiredLabelTip';
const CheckboxGroup = Checkbox.Group;
import React from "react";
import { Col, Row } from "antd";
import { WeaInput, WeaSelect } from "ecCom";
export default class CustomForm extends React.Component {
handleChange(params) {
let request = {...this.props.request, ...params}
this.props.onChange(request);
}
handleChange(params) {
let request = { ...this.props.request, ...params };
this.props.onChange(request);
}
render() {
const { request, disable } = this.props;
return (
<div style={{padding: "20px"}}>
{
this.props.condition.map(item => {
let disabledValue = disable && disable.indexOf(item.domkey[0]) >= 0
return (
<Row style={{lineHeight: "40px"}}>
<Col span={6}>
{item.label} {
item.rules == "required" && <RequiredLabelTip />
} :
</Col>
<Col span={18}>
{
item.conditionType == "INPUT" &&
<WeaInput value={request[item.domkey[0]]} disabled={disabledValue} onChange={(value) => {
this.handleChange({[item.domkey[0]]: value})
}}/>
}
render() {
const { request, disable } = this.props;
return (
<div className="customFLWrapper">
{
this.props.condition.map(item => {
let disabledValue = disable && disable.indexOf(item.domkey[0]) >= 0;
return (
<Row style={{ lineHeight: "40px" }}>
<Col span={6}>
{item.label}:
</Col>
<Col span={18}>
{
item.conditionType == "INPUT" &&
<WeaInput viewAttr={item.rules == "required" ? 3 : 2} value={request[item.domkey[0]]}
disabled={disabledValue} onChange={(value) => {
this.handleChange({ [item.domkey[0]]: value });
}}/>
}
{
item.conditionType == "RADIO" && item.options &&
<Radio.Group value={request[item.domkey[0]]}
disabled={disabledValue}
onChange={(e) => this.handleChange({[item.domkey[0]]: e.target.value})}>
{
item.options.map(o => (
<Radio value={o.key}>{o.showname}</Radio>
))
}
</Radio.Group>
}
{
item.conditionType == "RADIO" && item.options &&
<WeaSelect
detailtype={3} value={request[item.domkey[0]]}
disabled={disabledValue}
viewAttr={item.rules == "required" ? 3 : 2}
onChange={(value) => this.handleChange({ [item.domkey[0]]: value })}
options={item.options.map(o => ({ showname: o.showname, key: o.key }))}
/>
}
{
item.conditionType == "CHECKBOX" &&
item.options &&
<CheckboxGroup
disabled={disabledValue}
value={request[item.domkey[0]]} options={item.options.map(o => ({label: o.showname, value: o.key}))} onChange={(value) => this.handleChange({[item.domkey[0]]: value}) }/>
}
</Col>
</Row>
)
})
}
</div>
)
}
}
{
item.conditionType == "CHECKBOX" &&
item.options &&
<WeaSelect
detailtype={2}
disabled={disabledValue}
viewAttr={item.rules == "required" ? 3 : 2}
value={request[item.domkey[0]]}
options={item.options.map(o => ({ showname: o.showname, key: o.key }))}
onChange={(value) => this.handleChange({ [item.domkey[0]]: value })}/>
}
</Col>
</Row>
);
})
}
</div>
);
}
}

13
pc4mobx/hrmSalary/components/importModal/index.less
View File

@ -1,7 +1,16 @@
.importModalWrapper{
.wea-dialog-body{
.importModalWrapper {
.wea-dialog-body {
height: 80vh;
overflow: hidden auto;
padding: 16px;
}
.wea-select, .ant-select, .ant-select-selection {
width: 100%;
}
.ant-select-selection {
height: 30px;
border-radius: 0;
}
}

47
pc4mobx/hrmSalary/components/smallTab/index.js
View File

@ -1,26 +1,27 @@
import React from 'react'
import "./index.less"
import React from "react";
import "./index.less";
export default class SmallTab extends React.Component {
constructor(props) {
super(props)
this.state = {
selectedItem: this.props.items[0]
}
}
constructor(props) {
super(props);
this.state = {
selectedItem: this.props.items[0]
};
}
render() {
const { selectedItem } = this.state
return (
<div className="smallTab">
{
this.props.items.map(item => (
<span className={selectedItem.title == item.title ? "tabItem tabItemSelected": "tabItem"} onClick={() => {
this.setState({selectedItem: item}); this.props.onChange(item)
}}>{item.title}</span>
))
}
</div>
)
}
}
render() {
const { selectedItem } = this.state;
return (
<div className="smallTab">
{
this.props.items.map(item => (
<span className={selectedItem.title == item.title ? "tabItem tabItemSelected" : "tabItem"} onClick={() => {
this.setState({ selectedItem: item });
this.props.onChange(item);
}}>{item.title}</span>
))
}
</div>
);
}
}

514
pc4mobx/hrmSalary/pages/calculateDetail/compareDetail.js
View File

@ -1,262 +1,266 @@
import React from 'react'
import { Button, Table } from "antd"
import { WeaInputSearch, WeaCheckbox, WeaTable } from 'ecCom'
import { mergeDetailColumns, dataSource } from './columns'
import { getQueryString } from '../../util/url'
import CustomTab from '../../components/customTab'
import { inject, observer } from 'mobx-react';
import CompareDetailImportModal from './compareDetailImportModal'
import CustomTable from '../../components/customTable'
import CustomPaginationTable from '../../components/customPaginationTable'
import React from "react";
import { Button } from "antd";
import { WeaCheckbox, WeaInputSearch } from "ecCom";
import { getQueryString } from "../../util/url";
import CustomTab from "../../components/customTab";
import { inject, observer } from "mobx-react";
import CompareDetailImportModal from "./compareDetailImportModal";
import CustomPaginationTable from "../../components/customPaginationTable";
@inject('calculateStore')
@inject("calculateStore")
@observer
export default class CompareDetail extends React.Component {
constructor(props) {
super(props)
this.id = ""
this.state = {
onlyDiffEmployee: true,
onlyDiffSalaryItem: true,
importModalVisible: false,
searchValue: ""
}
this.pageInfo = {current: 1, pageSize: 10}
constructor(props) {
super(props);
this.id = "";
this.state = {
onlyDiffEmployee: true,
onlyDiffSalaryItem: true,
importModalVisible: false,
searchValue: ""
};
this.pageInfo = { current: 1, pageSize: 10 };
}
componentWillMount() {
let id = getQueryString("id");
this.id = id;
const { calculateStore: { fetchComparisonResultList } } = this.props;
const { onlyDiffEmployee, onlyDiffSalaryItem } = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
current: 1
};
fetchComparisonResultList(params);
}
// 计算差值
calculateCompares(systemValue, excelValue) {
if (systemValue == null || excelValue == null) {
return "";
}
componentWillMount() {
let id = getQueryString("id");
this.id = id;
const { calculateStore: {fetchComparisonResultList}} = this.props;
const { onlyDiffEmployee, onlyDiffSalaryItem} = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
current: 1
}
fetchComparisonResultList(params)
let systemNum = Number(systemValue);
let excelNum = Number(excelValue);
if (!isNaN(systemNum) || !isNaN(excelNum)) { // 数字
return systemNum - excelNum;
}
return "";
}
// 计算差值
calculateCompares(systemValue, excelValue) {
if(systemValue == null || excelValue == null) {
return ""
}
let systemNum = Number(systemValue)
let excelNum = Number(excelValue)
if (!isNaN(systemNum) || !isNaN(excelNum)) { // 数字
return systemNum - excelNum
}
return ""
}
getColumns(columns) {
let newColumns = [...columns]
newColumns.map(item => {
let n = Number(item.dataIndex)
if (!isNaN(n)) { // 数字
item.render = (text, record) => {
return (
<div>
<div>系统值：{record[item.dataIndex].acctResultValue}</div>
<div>线下值：{record[item.dataIndex].excelResultValue}</div>
<div style={{color: 'red'}}>差值：{this.calculateCompares(record[item.dataIndex].acctResultValue, record[item.dataIndex].excelResultValue)}</div>
</div>
)
}
}
})
return newColumns
}
// 导入
handleImportClick() {
this.setState({
importModalVisible: true
})
}
// 分页变化
handleDataPageChange(value) {
const { calculateStore: {fetchComparisonResultList}} = this.props;
const { onlyDiffEmployee, onlyDiffSalaryItem} = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
current: value,
...this.pageInfo
}
fetchComparisonResultList(params)
}
handleShowSizeChange(pageInfo) {
const { calculateStore: {fetchComparisonResultList}} = this.props;
const { onlyDiffEmployee, onlyDiffSalaryItem} = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
...pageInfo
}
fetchComparisonResultList(params)
}
// 只显示有差异的人员 变化
onlyDiffEmployeeChange(value) {
let onlyDiffEmployee = value == 1 ? true : false
this.setState({onlyDiffEmployee})
const { calculateStore: {fetchComparisonResultList}} = this.props;
const { onlyDiffSalaryItem} = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
employeeName: this.state.searchValue,
current: 1
}
fetchComparisonResultList(params)
}
// 只显示有差异的薪资项目 变化
onlyDiffSalaryItemChange(value) {
let onlyDiffSalaryItem = value == 1 ? true : false
this.setState({onlyDiffSalaryItem})
const { calculateStore: {fetchComparisonResultList}} = this.props;
const { onlyDiffEmployee} = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
employeeName: this.state.searchValue,
current: 1
}
fetchComparisonResultList(params)
}
// 搜索
handleSearch(value) {
const { calculateStore: {fetchComparisonResultList}} = this.props;
const { onlyDiffEmployee, onlyDiffSalaryItem } = this.state
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
employeeName: value,
current: 1
}
fetchComparisonResultList(params)
}
// 导出
handleExportClick() {
const { calculateStore: {exportComparisonResult}} = this.props;
exportComparisonResult(this.id)
}
// 线下对比导入
handleComparisonFinish() {
this.pageInfo.current = 1
this.pageInfo.pageSize = 10
this.handleSearch(this.state.searchValue)
}
render() {
const { calculateStore: {comparisonResultPageInfo, comparisonResultTableStore, loading, comparisonResultColumns}} = this.props;
const { importModalVisible, searchValue } = this.state;
const renderRightOperation = () => {
return (
<div style={{display: "inline-block"}}>
<Button type="primary" style={{marginRight: "10px"}} onClick={() => this.handleImportClick()} >导入</Button>
<Button type="default" style={{marginRight: "10px"}} onClick={() => this.handleExportClick()}>导出</Button>
<WeaInputSearch value={searchValue} onChange={(value) => {
this.setState({
searchValue: value
})
}} onSearch={(value) => {
this.handleSearch(value)
}}/>
</div>
)
}
const renderLeftOperation = () => {
return (
<div>
<WeaCheckbox content="只显示有差异的人员" value={this.state.onlyDiffEmployee ? 1 : 0}
onChange={(value) => {
this.onlyDiffEmployeeChange(value)
}}
/>
<WeaCheckbox content="只显示有差异的薪资项目" value={this.state.onlyDiffSalaryItem ? 1 : 0}
onChange={(value) => {
this.onlyDiffSalaryItemChange(value)
}}
/>
</div>
)
}
return (
<div className="compareDetail">
<CustomTab
searchOperationItem={
renderRightOperation()
}
leftOperation={
renderLeftOperation()
}
/>
<div className="titleBarWrapper">
<div className="titleBar">
<span className="leftTitle">公式=</span>
<span className="rightTitle">系统值；线下值；<span style={{color: "red"}}>差值</span></span>
</div>
</div>
<div className="tableWrapper">
<CustomPaginationTable
loading={loading}
dataSource={comparisonResultPageInfo.list ? comparisonResultPageInfo.list : []}
columns={this.getColumns(comparisonResultColumns ? comparisonResultColumns : [])}
scroll={{x: this.getColumns(comparisonResultColumns ? comparisonResultColumns : []).length * 150}}
total={comparisonResultPageInfo.total}
current={comparisonResultPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={(value) => {
this.pageInfo.current = value
this.handleDataPageChange(value)
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = {current, pageSize}
this.handleShowSizeChange(this.pageInfo)
}}
/>
</div>
{
importModalVisible && <CompareDetailImportModal
visiable={importModalVisible}
id={this.id}
onFinish={() => {
this.handleComparisonFinish()
}}
onCancel={() => {
this.setState({
importModalVisible: false
})
}}
/>
}
getColumns(columns) {
let newColumns = [...columns];
newColumns.map(item => {
let n = Number(item.dataIndex);
if (!isNaN(n)) { // 数字
item.render = (text, record) => {
return (
<div>
<div>系统值：{record[item.dataIndex].acctResultValue}</div>
<div>线下值：{record[item.dataIndex].excelResultValue}</div>
<div
style={{ color: "red" }}>差值：{this.calculateCompares(record[item.dataIndex].acctResultValue, record[item.dataIndex].excelResultValue)}</div>
</div>
)
}
}
);
};
}
});
return newColumns;
}
// 导入
handleImportClick() {
this.setState({
importModalVisible: true
});
}
// 分页变化
handleDataPageChange(value) {
const { calculateStore: { fetchComparisonResultList } } = this.props;
const { onlyDiffEmployee, onlyDiffSalaryItem } = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
current: value,
...this.pageInfo
};
fetchComparisonResultList(params);
}
handleShowSizeChange(pageInfo) {
const { calculateStore: { fetchComparisonResultList } } = this.props;
const { onlyDiffEmployee, onlyDiffSalaryItem } = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
...pageInfo
};
fetchComparisonResultList(params);
}
// 只显示有差异的人员 变化
onlyDiffEmployeeChange(value) {
let onlyDiffEmployee = value == 1 ? true : false;
this.setState({ onlyDiffEmployee });
const { calculateStore: { fetchComparisonResultList } } = this.props;
const { onlyDiffSalaryItem } = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
employeeName: this.state.searchValue,
current: 1
};
fetchComparisonResultList(params);
}
// 只显示有差异的薪资项目 变化
onlyDiffSalaryItemChange(value) {
let onlyDiffSalaryItem = value == 1 ? true : false;
this.setState({ onlyDiffSalaryItem });
const { calculateStore: { fetchComparisonResultList } } = this.props;
const { onlyDiffEmployee } = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
employeeName: this.state.searchValue,
current: 1
};
fetchComparisonResultList(params);
}
// 搜索
handleSearch(value) {
const { calculateStore: { fetchComparisonResultList } } = this.props;
const { onlyDiffEmployee, onlyDiffSalaryItem } = this.state;
let params = {
onlyDiffEmployee,
onlyDiffSalaryItem,
salaryAcctRecordId: this.id,
employeeName: value,
current: 1
};
fetchComparisonResultList(params);
}
// 导出
handleExportClick() {
window.open(
'/api/bs/hrmsalary/salaryacct/comparisonresult/export?salaryAcctRecordId=' + this.id
);
}
// 线下对比导入
handleComparisonFinish() {
this.pageInfo.current = 1;
this.pageInfo.pageSize = 10;
this.handleSearch(this.state.searchValue);
}
render() {
const {
calculateStore: {
comparisonResultPageInfo,
comparisonResultTableStore,
loading,
comparisonResultColumns
}
} = this.props;
const { importModalVisible, searchValue } = this.state;
const renderRightOperation = () => {
return (
<div style={{ display: "inline-block" }}>
<Button type="primary" style={{ marginRight: "10px" }} onClick={() => this.handleImportClick()}>导入</Button>
<Button type="default" style={{ marginRight: "10px" }} onClick={() => this.handleExportClick()}>导出</Button>
<WeaInputSearch value={searchValue} onChange={(value) => {
this.setState({
searchValue: value
});
}} onSearch={(value) => {
this.handleSearch(value);
}}/>
</div>
);
};
const renderLeftOperation = () => {
return (
<div>
<WeaCheckbox content="只显示有差异的人员" value={this.state.onlyDiffEmployee ? 1 : 0}
onChange={(value) => {
this.onlyDiffEmployeeChange(value);
}}
/>
<WeaCheckbox content="只显示有差异的薪资项目" value={this.state.onlyDiffSalaryItem ? 1 : 0}
onChange={(value) => {
this.onlyDiffSalaryItemChange(value);
}}
/>
</div>
);
};
return (
<div className="compareDetail">
<CustomTab
searchOperationItem={
renderRightOperation()
}
leftOperation={
renderLeftOperation()
}
/>
<div className="titleBarWrapper">
<div className="titleBar">
<span className="leftTitle">公式=</span>
<span className="rightTitle">系统值；线下值；<span style={{ color: "red" }}>差值</span></span>
</div>
</div>
<div className="tableWrapper">
<CustomPaginationTable
loading={loading}
dataSource={comparisonResultPageInfo.list ? comparisonResultPageInfo.list : []}
columns={this.getColumns(comparisonResultColumns ? comparisonResultColumns : [])}
scroll={{ x: this.getColumns(comparisonResultColumns ? comparisonResultColumns : []).length * 150 }}
total={comparisonResultPageInfo.total}
current={comparisonResultPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={(value) => {
this.pageInfo.current = value;
this.handleDataPageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handleShowSizeChange(this.pageInfo);
}}
/>
</div>
{
importModalVisible && <CompareDetailImportModal
visiable={importModalVisible}
id={this.id}
onFinish={() => {
this.handleComparisonFinish();
}}
onCancel={() => {
this.setState({
importModalVisible: false
});
}}
/>
}
</div>
);
}
}

175
pc4mobx/hrmSalary/pages/calculateDetail/compareDetailImportModal.js
View File

@ -1,85 +1,98 @@
import React from 'react'
import ImportModal from '../../components/importModal'
import { inject, observer } from 'mobx-react';
import React from "react";
import ImportModal from "../../components/importModal";
import { inject, observer } from "mobx-react";
@inject('calculateStore')
@inject("calculateStore")
@observer
export default class CompareDetailImportModal extends React.Component {
constructor(props) {
super(props)
this.state = {
step: 0,
modalParam: {
salaryAcctRecordId: ""
}
constructor(props) {
super(props);
this.state = {
step: 0,
modalParam: {
salaryAcctRecordId: ""
}
};
}
componentWillMount() {
const { id } = this.props;
let modalParam = { ...this.state.modalParam };
modalParam.salaryAcctRecordId = id;
this.setState({
modalParam
});
}
// 设置步骤
setStep(step) {
this.setState({ step });
}
handleTemplateLink() {
window.open(
"/api/bs/hrmsalary/salaryacct/comparisonresult/importtemplate/export?salaryAcctRecordId=" + this.props.id
);
}
// 初始化导入参数
handleInitImportModal() {
const {
calculateStore: {
setComparisonPreviewColumns,
setComparisonPreviewDataSource,
setComparisonImportAcctResult
}
} = this.props;
setComparisonPreviewColumns([]);
setComparisonPreviewDataSource([]);
setComparisonImportAcctResult({});
}
render() {
const { visiable } = this.props;
const { step, modalParam } = this.state;
const { calculateStore } = this.props;
const {
previewComparisonResult,
comparisonPreviewColumns,
comparisonPreviewDataSource,
importComparisonExcelAcctResult,
comparisonImportAcctResult
} = calculateStore;
return (
<div>
{
visiable && <ImportModal
init={() => {
this.handleInitImportModal();
}}
params={modalParam}
columns={comparisonPreviewColumns}
step={step}
setStep={this.setStep.bind(this)}
slideDataSource={comparisonPreviewDataSource}
importResult={comparisonImportAcctResult}
onFinish={() => {
this.props.onCancel();
this.props.onFinish();
}}
previewImport={(params) => {
previewComparisonResult(params);
}}
importFile={(params) => {
importComparisonExcelAcctResult(params);
}}
templateLink={() => {
this.handleTemplateLink();
}}
visiable={visiable}
onCancel={() => {
this.props.onCancel();
}}
/>
}
}
componentWillMount() {
const { id } = this.props;
let modalParam = { ...this.state.modalParam }
modalParam.salaryAcctRecordId = id
this.setState({
modalParam
})
}
// 设置步骤
setStep(step) {
this.setState({step})
}
handleTemplateLink() {
const { calculateStore: { exportImportTemplate }} = this.props;
exportImportTemplate(this.props.id)
}
// 初始化导入参数
handleInitImportModal() {
const { calculateStore: {setComparisonPreviewColumns, setComparisonPreviewDataSource, setComparisonImportAcctResult}} = this.props;
setComparisonPreviewColumns([])
setComparisonPreviewDataSource([])
setComparisonImportAcctResult({})
}
render() {
const { visiable } = this.props;
const { step, modalParam } = this.state;
const { calculateStore } = this.props
const { previewComparisonResult, comparisonPreviewColumns, comparisonPreviewDataSource, importComparisonExcelAcctResult, comparisonImportAcctResult } = calculateStore
return (
<div>
{
visiable && <ImportModal
init={() => {
this.handleInitImportModal()
}}
params={modalParam}
columns={comparisonPreviewColumns}
step={step}
setStep={this.setStep.bind(this)}
slideDataSource={comparisonPreviewDataSource}
importResult={comparisonImportAcctResult}
onFinish={() => {
this.props.onCancel();
this.props.onFinish();
}}
previewImport={(params) => {
previewComparisonResult(params)
}}
importFile={(params) => {
importComparisonExcelAcctResult(params)
}}
templateLink={ () => {
this.handleTemplateLink()
}}
visiable={visiable}
onCancel={() => {
this.props.onCancel()
}}
/>
}
</div>
)
}
}
</div>
);
}
}

265
pc4mobx/hrmSalary/pages/calculateDetail/editSalaryDetail.js
View File

@ -1,132 +1,157 @@
import React from 'react'
import { WeaHelpfulTip, WeaInput } from "ecCom"
import { Row, Col } from 'antd'
import { inject, observer } from 'mobx-react';
import "./index.less"
import React from "react";
import { WeaHelpfulTip, WeaInput } from "ecCom";
import { Col, Row } from "antd";
import { inject, observer } from "mobx-react";
import cs from "classnames";
import "./index.less";
@inject('calculateStore')
@inject("calculateStore")
@observer
export default class EditSalaryDetail extends React.Component {
componentWillMount() {
const { calculateStore: {acctresultDetail}} = this.props;
acctresultDetail(this.props.id)
}
componentWillMount() {
const { calculateStore: { acctresultDetail } } = this.props;
acctresultDetail(this.props.id);
}
handleItemValueChange(field, value, isInput) {
const { calculateStore: { acctresultDetailForm, setAcctresultDetailForm }} = this.props;
let form = {...acctresultDetailForm}
if(isInput) {
form.inputItems = acctresultDetailForm.inputItems.map(item => {
item = {...item}
if(item.salaryItemName == field) {
item.resultValue = value
}
return item;
})
} else {
form.formulaItems = acctresultDetailForm.formulaItems.map(item => {
item = {...item}
if(item.salaryItemName == field) {
item.resultValue = value
}
return item;
})
handleItemValueChange(field, value, isInput) {
const { calculateStore: { acctresultDetailForm, setAcctresultDetailForm } } = this.props;
let form = { ...acctresultDetailForm };
if (isInput) {
form.inputItems = acctresultDetailForm.inputItems.map(item => {
item = { ...item };
if (item.salaryItemName == field) {
item.resultValue = value;
}
setAcctresultDetailForm(form)
return item;
});
} else {
form.formulaItems = acctresultDetailForm.formulaItems.map(item => {
item = { ...item };
if (item.salaryItemName == field) {
item.resultValue = value;
}
return item;
});
}
setAcctresultDetailForm(form);
}
renderTableTr = (data, isInput) => {
const tables = [];
const len = data.length;
const rowNum = 3;
const sumRows = len % rowNum;
const sumRowMod = len / rowNum;
const rows = (sumRows == 0 ? sumRowMod : sumRowMod + 1);
for (let j = 0; j < rows; j++) {
let iLen = (j + 1) * rowNum;
iLen = iLen > len ? len : iLen;
tables.push("<tr class='descriptions-row'>");
for (let i = j * rowNum; i < iLen; i++) {
if (!isInput) {
const label = data[i].fieldName;
const value = data[i].fieldValue || "-";
tables.push("<th class=\"descriptions-item-label\">" + label + "</th>" + "<td class=\"descriptions-item-content\">" + value + "</td>");
}
}
tables.push("</tr>");
}
return tables;
};
render() {
const { calculateStore: { acctresultDetailForm }} = this.props;
return (
<div className="editSalaryDetail">
<div className="detailItemWrapper">
<div>
<span className="itemTitle">基本信息</span>
<WeaHelpfulTip
style={{marginLeft: "10px"}}
width={200}
title="根据账套设置显示"
placement="topLeft"
/>
</div>
render() {
const { calculateStore: { acctresultDetailForm } } = this.props;
return (
<div className="editSalaryDetail">
<div className="detailItemWrapper">
<div>
<span className="itemTitle">基本信息</span>
<WeaHelpfulTip
style={{ marginLeft: "10px" }}
width={200}
title="根据账套设置显示"
placement="topLeft"
/>
</div>
<div className="itemContent">
<Row classsName="itemRow">
{
acctresultDetailForm.employeeInfos && acctresultDetailForm.employeeInfos.map(item => {
return (
<Col span={8}>
<Row>
<Col span={12}>{item.fieldName}</Col>
<Col span={12}>{item.fieldValue}</Col>
</Row>
</Col>
)
})
}
<div className="itemContent">
{
!_.isEmpty(acctresultDetailForm.employeeInfos) &&
<table
dangerouslySetInnerHTML={{ __html: this.renderTableTr(acctresultDetailForm.employeeInfos).join(",").replace(/,/g, "") }}
/>
}
</div>
</div>
<div>
<div className="detailItemWrapper">
<span className="itemTitle">输入项</span>
<div className="itemContent">
<Row>
{
acctresultDetailForm.inputItems && acctresultDetailForm.inputItems.map((item, index) => {
const len = acctresultDetailForm.inputItems.length;
return (
<Col span={8}>
<Row>
<Col span={12}
className={cs("itemLabel", { "borderB-none": Math.ceil((index + 1) / 3) === len / 3 })}>{item.salaryItemName}</Col>
<Col span={12} className={cs("itemValue", {
"borderB-none": Math.ceil((index + 1) / 3) === len / 3,
"borderR-none": (index + 1) % 3 === 0
})}><WeaInput value={item.resultValue} disabled={!item.canEdit} onChange={(value) => {
this.handleItemValueChange(item.salaryItemName, value, true);
}}/></Col>
</Row>
</div>
</div>
<div>
<div className="detailItemWrapper">
<span className="itemTitle">输入项</span>
</div>
<div className="itemContent">
<Row className="itemRow">
{
acctresultDetailForm.inputItems && acctresultDetailForm.inputItems.map(item => {
return (
<Col span={8}>
<Row style={{paddingLeft:"10px", paddingRight: "10px"}}>
<Col span={12}>{item.salaryItemName}</Col>
<Col span={12}><WeaInput value={item.resultValue} disabled={!item.canEdit} onChange={(value) => {
this.handleItemValueChange(item.salaryItemName, value, true)
}}/></Col>
</Row>
</Col>
)
})
}
</Row>
</div>
</div>
<div>
<div className="detailItemWrapper">
<span className="itemTitle">公式项</span>
<WeaHelpfulTip
style={{marginLeft: "10px"}}
width={200}
title="提示：修改后，若点击核算，将按照公式核算，覆盖修改的数据"
placement="topLeft"
/>
</div>
<div className="itemContent">
<Row className="itemRow">
{
acctresultDetailForm.formulaItems && acctresultDetailForm.formulaItems.map(item => {
return (
<Col span={8}>
<Row style={{paddingLeft:"10px", paddingRight: "10px"}}>
<Col span={12}>{item.salaryItemName}</Col>
<Col span={12}><WeaInput value={item.resultValue} disabled={!item.canEdit} onChange={(value) => {
this.handleItemValueChange(item.salaryItemName, value, false)
}}/></Col>
</Row>
</Col>
)
})
}
</Row>
</div>
</div>
</Col>
);
})
}
</Row>
</div>
)
}
</div>
</div>
<div>
<div className="detailItemWrapper">
<span className="itemTitle">
<span>公式项</span>
<WeaHelpfulTip
style={{ marginLeft: "10px" }}
width={200}
title="提示：修改后，若点击核算，将按照公式核算，覆盖修改的数据"
placement="topLeft"
/>
</span>
<div className="itemContent">
<Row>
{
acctresultDetailForm.formulaItems && acctresultDetailForm.formulaItems.map((item, index) => {
const len = acctresultDetailForm.formulaItems.length;
return (
<Col span={8}>
<Row>
<Col span={12}
className={cs("itemLabel", { "borderB-none": Math.ceil((index + 1) / 3) === len / 3 })}>{item.salaryItemName}</Col>
<Col span={12} className={cs("itemValue", {
"borderB-none": Math.ceil((index + 1) / 3) === len / 3,
"borderR-none": (index + 1) % 3 === 0
})}><WeaInput value={item.resultValue} disabled={!item.canEdit} onChange={(value) => {
this.handleItemValueChange(item.salaryItemName, value, false);
}}/></Col>
</Row>
</Col>
);
})
}
</Row>
</div>
</div>
</div>
</div>
);
}
}

8
pc4mobx/hrmSalary/pages/calculateDetail/index.js
View File

@ -197,8 +197,9 @@ export default class CalculateDetail extends React.Component {
this.id
);
} else if (e.key == "3") {
const { calculateStore: { exportAll } } = this.props;
exportAll(this.id);
window.open(
'/api/bs/hrmsalary/salaryacct/acctresult/export?salaryAcctRecordId=' + this.id +"&ids="
);
}
};
@ -248,11 +249,10 @@ export default class CalculateDetail extends React.Component {
return [
<Button
type="primary"
style={{ marginRight: "10px" }}
onClick={() => this.handleAccount()}>
核算
</Button>,
<Dropdown.Button style={{ marginRight: "10px" }} overlay={menu}>
<Dropdown.Button overlay={menu}>
更多
</Dropdown.Button>
];

137
pc4mobx/hrmSalary/pages/calculateDetail/index.less
View File

@ -16,9 +16,11 @@
display: flex;
align-items: center;
justify-content: space-between;
.wea-tab{
border-bottom: none!important;
.wea-tab {
border-bottom: none !important;
}
.crumbsWrapper {
display: inline-block;
@ -34,15 +36,19 @@
.crumbsOperateWrapper {
flex: 1;
.wea-advanced-search{
right: 0!important;
.wea-advanced-search {
right: 0 !important;
}
.wea-advanced-searchsAd{
height: inherit!important;
.wea-advanced-searchsAd {
height: inherit !important;
}
.wea-search-tab{
.wea-search-tab {
padding-right: 0;
.iconItem{
.iconItem {
color: #2db7f5;
cursor: pointer;
}
@ -76,9 +82,9 @@
}
}
.editSalaryDetail {
padding: 20px;
padding-bottom: 40px;
.detailItemWrapper {
.itemTitle {
@ -89,6 +95,73 @@
.itemContent {
margin-top: 10px;
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 1px solid rgba(0, 0, 0, .06);
.descriptions-row {
.descriptions-item-label {
background-color: #fafafa;
padding: 12px 6px;
color: #000000d9;
font-weight: 400;
font-size: 12px;
line-height: 1.5715;
text-align: start;
border: 1px solid rgba(0, 0, 0, .06);
min-width: 100px;
max-width: 100px;
}
.descriptions-item-content {
padding: 12px 6px;
display: table-cell;
flex: 1;
color: #000000d9;
font-size: 12px;
line-height: 1.5715;
word-break: break-word;
overflow-wrap: break-word;
border-collapse: collapse;
border: 1px solid rgba(0, 0, 0, .06);
}
}
}
& > .ant-row {
border: 1px solid rgba(0, 0, 0, .06);
}
.itemLabel {
background-color: #fafafa;
padding: 12px 6px;
height: 45px;
display: flex;
align-items: center;
justify-content: flex-start;
border-right: 1px solid rgba(0, 0, 0, .06);
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.borderB-none {
border-bottom: none !important;
}
.borderR-none {
border-right: none !important;
}
.itemValue {
padding: 12px 6px;
display: flex;
align-items: center;
height: 45px;
border-right: 1px solid rgba(0, 0, 0, .06);
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
}
}
@ -98,13 +171,13 @@
}
.placeOnFileDetail {
padding: 20px;
height: 100%;
overflow-y: scroll;
overflow-y: auto;
.tabWrapper {
height: 47px;
line-height: 47px;
padding-left: 16px;
}
.tableWrapper {
@ -145,9 +218,13 @@
}
.compareDetail {
overflow-y: scroll;
overflow-y: auto;
height: 100%;
padding: 20px;
.tabWrapper {
align-items: center;
padding-left: 10px;
}
.titleBarWrapper {
height: 47px;
@ -156,9 +233,43 @@
.rightTitle {
float: right;
}
.titleBar {
padding-right: 10px;
}
}
.tableWrapper {
margin-top: 10px;
}
}
.slideOuterWrapper {
.wea-slide-modal-title {
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close {
z-index: 99;
top: 10px !important;
}
}
@media (min-width: 1260px) {
.slideOuterWrapper {
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
max-width: 100% !important;
}
}
}
@media screen and (min-width: 1060px) and (max-width: 1260px) {
.slideOuterWrapper {
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
max-width: calc(100% - 96px) !important;
}
}
}

3
pc4mobx/hrmSalary/pages/calculateDetail/salaryDetail.js
View File

@ -1,12 +1,12 @@
import React from "react";
import { WeaHelpfulTip, WeaSlideModal } from "ecCom";
import WarningModal from "./warningModal";
import "./index.less";
import EditSalaryDetail from "./editSalaryDetail";
import SlideModalTitle from "../../components/slideModalTitle";
import { getQueryString } from "../../util/url";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import "./index.less";
@inject("calculateStore", "taxAgentStore")
@observer
@ -156,6 +156,7 @@ export default class SalaryDetail extends React.Component {
{
slideVisiable &&
<WeaSlideModal
className="slideOuterWrapper"
visible={slideVisiable}
top={0}
width={60}

30
pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js
View File

@ -1,14 +1,11 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Button, Col, DatePicker, Dropdown, Menu, message, Modal, Row, Select, Switch } from "antd";
import { WeaDatePicker, WeaInputSearch, WeaRightMenu, WeaSlideModal, WeaTop } from "ecCom";
import { Button, Col, DatePicker, Dropdown, Menu, message, Modal, Row, Switch } from "antd";
import { WeaDatePicker, WeaInputSearch, WeaRightMenu, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import moment from "moment";
import { renderNoright } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../../components/customTab";
import { columns } from "./columns";
import ImportModal from "../../../components/importModal";
import HeaderSet from "../../../components/importModal/headerSet";
@ -23,7 +20,6 @@ import ItemMangeFormModal from "./itemMangeFormModal";
import CustomPaginationTable from "../../../components/customPaginationTable";
const MonthPicker = DatePicker.MonthPicker;
const { Option } = Select;
@inject("attendanceStore", "taxAgentStore")
@observer
@ -298,7 +294,7 @@ export default class Attendance extends React.Component {
const {
loading,
hasRight,
tableStore,
tableStore
} = attendanceStore;
const {
step,
@ -459,10 +455,18 @@ export default class Attendance extends React.Component {
薪资账套：
</span>
{this.state.inited &&
<Select
defaultValue={this.state.modalParam.salarySobId}
<WeaSelect
value={this.state.modalParam.salarySobId}
style={{ width: "200px" }}
options={
!_.isEmpty(importLedgerList) ? [{
key: "",
showname: ""
}, ..._.map(importLedgerList, it => ({ key: it.id, showname: it.content }))] : [{
key: "",
showname: ""
}]
}
onChange={value => {
this.setState({
modalParam: { ...modalParam, salarySobId: value }
@ -471,13 +475,7 @@ export default class Attendance extends React.Component {
this.state.modalParam.salaryYearMonth,
value
);
}}>
{importLedgerList.map(item =>
<Option value={item.id} key={item.id}>
{item.content}
</Option>
)}
</Select>}
}}/>}
</Col>
<Col span={12}>
<span

44
pc4mobx/hrmSalary/pages/ledger/addUserModal.js
View File

@ -1,8 +1,8 @@
import React from "react";
import { Button, Col, Radio, Row } from "antd";
import { Button, Col, Row } from "antd";
import { WeaBrowser, WeaDialog, WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import RequiredLabelTip from "../../components/requiredLabelTip";
import "./index.less";
const objectOptions = [
{
@ -74,6 +74,8 @@ export default class AddUserModal extends React.Component {
onCancel={() => {
this.props.onCancel();
}}
initLoadCss
className="associatesWrapper"
style={{ width: 600 }}
title="关联人员"
buttons={[
@ -92,16 +94,12 @@ export default class AddUserModal extends React.Component {
重置
</Button>
]}>
<div style={{ padding: "20px" }}>
<div style={{ padding: "16px 60px" }}>
<Row style={{ lineHeight: "40px" }}>
<Col span={8}>
对象类型
<RequiredLabelTip/>
</Col>
<Col span={5}>对象类型:</Col>
<Col span={16}>
<div style={{ display: "inline-block", verticalAlign: "top" }}>
<div style={{ display: "inline-block", verticalAlign: "top",marginRight: 10 }}>
<WeaSelect
style={{ height: "30px", marginRight: "10px" }}
options={objectOptions}
value={this.state.selectedKey}
onChange={(value) => {
@ -113,6 +111,7 @@ export default class AddUserModal extends React.Component {
{this.state.selectedKey == "EMPLOYEE" && (
<WeaBrowser
type={17}
viewAttr={3}
title={"人员选择"}
isSingle={false}
inputStyle={{ width: 200 }}
@ -125,6 +124,7 @@ export default class AddUserModal extends React.Component {
{this.state.selectedKey == "DEPT" && (
<WeaBrowser
type={57}
viewAttr={3}
title={"部门选择"}
isSingle={false}
value={this.state.ids}
@ -137,6 +137,7 @@ export default class AddUserModal extends React.Component {
{this.state.selectedKey == "SUBCOMPANY" && (
<WeaBrowser
type={164}
viewAttr={3}
title={"分部选择"}
isSingle={false}
value={this.state.ids}
@ -149,6 +150,7 @@ export default class AddUserModal extends React.Component {
{this.state.selectedKey == "POSITION" && (
<WeaBrowser
type={278}
viewAttr={3}
title={"岗位选择"}
isSingle={false}
value={this.state.ids}
@ -162,18 +164,22 @@ export default class AddUserModal extends React.Component {
</Col>
</Row>
<Row style={{ lineHeight: "40px" }}>
<Col span={8}>
选择员工状态
<RequiredLabelTip/>
</Col>
<Col span={5}>选择员工状态:</Col>
<Col span={16}>
<Radio.Group
<WeaSelect
viewAttr={3}
detailtype={3}
onChange={(e) => this.onRadioChange(e)}
value={this.state.radioValue}>
<Radio value={"ALL"}>全部</Radio>
<Radio value={"NORMAL"}>在职</Radio>
<Radio value={"UNAVAILABLE"}>离职</Radio>
</Radio.Group>
value={this.state.radioValue}
options={
[
{ key: "", showname: "" },
{ key: "ALL", showname: "全部" },
{ key: "NORMAL", showname: "在职" },
{ key: "UNAVAILABLE", showname: "离职" }
]
}
/>
</Col>
</Row>
</div>

7
pc4mobx/hrmSalary/pages/ledger/copyFormModal.js
View File

@ -33,6 +33,11 @@ export default class CopyFormModal extends React.Component {
<Button
type="primary"
onClick={() => {
if (!this.state.name && !this.state.taxAgentId) {
this.refs.weaNameError.showError();
this.refs.weaTaxAgentError.showError();
return;
}
if (!this.state.name) {
this.refs.weaNameError.showError();
return;
@ -56,6 +61,7 @@ export default class CopyFormModal extends React.Component {
<WeaInput
style={{ width: "200px" }}
value={this.state.name}
viewAttr={3}
placeholder="请输入"
onChange={value => {
this.setState({ name: value });
@ -73,6 +79,7 @@ export default class CopyFormModal extends React.Component {
ref="weaTaxAgentError"
error="请选择个税扣缴义务人">
<WeaSelect
viewAttr={3}
showSearch // 设置select可搜索
options={taxAgentAdminOption}
value={this.state.taxAgentId}

11
pc4mobx/hrmSalary/pages/ledger/index.less
View File

@ -300,3 +300,14 @@
}
}
}
//关联人员弹框
.associatesWrapper{
.wea-select,.ant-select-selection,.ant-select{
width: 100%;
}
.ant-select-selection{
height: 30px;
border-radius: 0;
}
}

6
pc4mobx/hrmSalary/pages/ledger/step4/RuleEditModal.js
View File

@ -107,9 +107,9 @@ export default class RuleEditModal extends React.Component {
this.handleSave();
}}>保存</Button>]}
>
<div style={{ padding: "20px" }}>
<div style={{ padding: "16px 100px" }}>
<Row style={{ lineHeight: "40px" }}>
<Col span={8}>薪资项目</Col>
<Col span={4}>薪资项目:</Col>
<Col span={16}>
{
initedSelect &&
@ -125,7 +125,7 @@ export default class RuleEditModal extends React.Component {
</Col>
</Row>
<Row style={{ lineHeight: "40px" }}>
<Col span={8}>计薪规则</Col>
<Col span={4}>计薪规则:</Col>
<Col span={16}>
<div className="item">
<WeaHelpfulTip

60
pc4mobx/hrmSalary/pages/salaryFile/changeSalaryModal.js
View File

@ -1,10 +1,9 @@
import React from "react";
import { Button, Col, Icon, message, Row, Select } from "antd";
import { WeaDatePicker, WeaDialog, WeaInput, WeaTable } from "ecCom";
import RequiredLabelTip from "../../components/requiredLabelTip";
import "./index.less";
import { Button, Col, message, Row, Select } from "antd";
import { WeaDatePicker, WeaDialog, WeaInput, WeaSelect, WeaTable } from "ecCom";
import { inject, observer } from "mobx-react";
import moment from "moment";
import "./index.less";
const { Option } = Select;
@ -83,24 +82,27 @@ export default class ChangeSalaryModal extends React.Component {
return columns.map(item => {
item = { ...item };
if (item.dataIndex == "salaryItem") {
item.title = <span>{item.title}<RequiredLabelTip/></span>;
item.title = <span>{item.title}</span>;
item.render = (text, record) => {
return (
<Select defaultValue={text} style={{ width: 150 }}
onChange={(value) => this.handleSalaryItemChange(record, value)}>
{
salaryItemList && salaryItemList.map(item => (
<Option value={item.key}>{item.showname}</Option>
))
<WeaSelect
value={text}
style={{ width: 150 }}
viewAttr={3}
options={
!_.isEmpty(salaryItemList) ? [{ key: "", showname: "" }, ...salaryItemList] : [{
key: "",
showname: ""
}]
}
</Select>
onChange={(value) => this.handleSalaryItemChange(record, value)}/>
);
};
} else if (item.dataIndex == "adjustAfter") {
item.title = <span>{item.title}<RequiredLabelTip/></span>;
item.title = <span>{item.title}</span>;
item.render = (text, record) => {
return (
<WeaInput style={{ width: "150px" }} value={text} onChange={(value) => {
<WeaInput style={{ width: "150px" }} viewAttr={3} value={text} onChange={(value) => {
this.handleSalaryAfterItemChange(record, value);
}}/>
);
@ -219,11 +221,10 @@ export default class ChangeSalaryModal extends React.Component {
<div className="changeSalaryWrapper">
<div className="changeSalaryModal">
<Row className="itemWrapper" style={{ lineHeight: "47px" }}>
<Col span={6}>
生效日期<RequiredLabelTip/>
</Col>
<Col span={6}>生效日期</Col>
<Col span={18}>
<WeaDatePicker
viewAttr={3}
format="yyyy-MM-dd"
style={{ width: "200px" }}
value={effectiveTime}
@ -234,18 +235,21 @@ export default class ChangeSalaryModal extends React.Component {
</Col>
</Row>
<Row className="itemWrapper" style={{ lineHeight: "47px" }}>
<Col span={6}>
调整原因<RequiredLabelTip/>
</Col>
<Col span={6}>调整原因</Col>
<Col span={18}>
<Select defaultValue={adjustReason} value={adjustReason} style={{ width: 200 }}
onChange={(value) => this.handleChange({ adjustReason: value })}>
{
salaryItemChangeForm.adjustReasonList && salaryItemChangeForm.adjustReasonList.map(item => (
<Option value={item.key}>{item.showname}</Option>
))
<WeaSelect
value={adjustReason}
style={{ width: 200 }}
viewAttr={3}
onChange={(value) => this.handleChange({ adjustReason: value })}
options={
!_.isEmpty(salaryItemChangeForm.adjustReasonList) ?
[{ key: "", showname: "" }, ...salaryItemChangeForm.adjustReasonList] : [{
key: "",
showname: ""
}]
}
</Select>
/>
</Col>
</Row>
<Row className="itemWrapper" style={{ lineHeight: "47px" }}>
@ -287,7 +291,7 @@ export default class ChangeSalaryModal extends React.Component {
<div className="tableWrapper">
{
this.state.inited &&
<WeaTable rowSelection={rowSelection} dataSource={salaryArchiveItems} columns={this.getColumns()}/>
<WeaTable rowSelection={rowSelection} dataSource={salaryArchiveItems} columns={this.getColumns()} pagination={false}/>
}
</div>
</div>

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

@ -3,6 +3,17 @@
min-height: 50vh;
max-height: 60vh;
overflow-y: auto;
.wea-select{
display: inline-block;
position: relative;
}
.wea-select,.ant-select,.ant-select-selection{
width: 100%;
}
.ant-select-selection{
border-radius: 0;
height: 30px;
}
.changeSalaryModal {
padding: 10px 20px;

63
pc4mobx/hrmSalary/pages/salaryItem/customSalaryItemSlide.js
View File

@ -1,12 +1,8 @@
import React from "react";
import { Row, Col, Switch, Radio } from "antd";
import { WeaHelpfulTip, WeaSelect, WeaTextarea, WeaInput } from "ecCom";
import { Col, Radio, Row, Switch } from "antd";
import { WeaHelpfulTip, WeaInput, WeaSelect, WeaTextarea } from "ecCom";
import "./index.less";
import {
roundingModeOptions,
patternOptions,
dataTypeOptions
} from "./options";
import { dataTypeOptions, patternOptions, roundingModeOptions } from "./options";
import RequiredLabelTip from "../../components/requiredLabelTip";
import FormalFormModal from "./formalFormModal";
@ -55,13 +51,11 @@ export default class CustomSalaryItemSlide extends React.Component {
<div className="customSalaryItemSlide">
<div>
<Row className="formItem">
<Col span={4}>
名称 <RequiredLabelTip />
</Col>
<Col span={4}>名称</Col>
<Col span={20}>
<WeaInput
viewAttr={
(editable && this.props.record.canEdit) || isAdd ? 2 : 1
(editable && this.props.record.canEdit) || isAdd ? 3 : 1
}
value={name}
onChange={value => {
@ -119,13 +113,12 @@ export default class CustomSalaryItemSlide extends React.Component {
<Row className="formItem">
<Col span={12}>
<Row>
<Col span={8}>
字段类型<RequiredLabelTip />
</Col>
<Col span={8}>字段类型</Col>
<Col span={16}>
<WeaSelect
disabled={isAdd ? false : true}
value={dataType}
viewAttr={3}
options={dataTypeOptions}
onChange={value => {
this.handleChange({ dataType: value });
@ -139,13 +132,11 @@ export default class CustomSalaryItemSlide extends React.Component {
<Row className="formItem">
<Col span={12}>
<Row>
<Col span={8}>
舍入规则<RequiredLabelTip />
</Col>
<Col span={8}>舍入规则</Col>
<Col span={16}>
<WeaSelect
viewAttr={
(editable && this.props.record.canEdit) || isAdd ? 2 : 1
(editable && this.props.record.canEdit) || isAdd ? 3 : 1
}
options={roundingModeOptions}
style={{ width: "200px" }}
@ -159,13 +150,11 @@ export default class CustomSalaryItemSlide extends React.Component {
</Col>
<Col span={12}>
<Row>
<Col span={8}>
保留小数位<RequiredLabelTip />
</Col>
<Col span={8}>保留小数位</Col>
<Col span={16}>
<WeaSelect
viewAttr={
(editable && this.props.record.canEdit) || isAdd ? 2 : 1
(editable && this.props.record.canEdit) || isAdd ? 3 : 1
}
options={patternOptions}
onChange={value => {
@ -180,37 +169,31 @@ export default class CustomSalaryItemSlide extends React.Component {
</Row>
<Row className="formItem">
<Col span={4}>
取值方式<RequiredLabelTip />
</Col>
<Col span={4}>取值方式</Col>
<Col span={20}>
<Radio.Group
<WeaSelect
disabled={isAdd ? false : true}
value={valueType}
onChange={e => {
viewAttr={3}
detailtype={3}
options={[
{key: "1", showname: "输入"},
{key: "2", showname: "公式"},
{key: "3", showname: "SQL"}
]}
onChange={value => {
this.handleChange({
valueType: e.target.value,
valueType: value,
formulaId: null,
formulaContent: ""
});
}}>
<Radio key={1} value={"1"}>
输入
</Radio>
<Radio key={2} value={"2"}>
公式
</Radio>
<Radio key={3} value={"3"}>
SQL
</Radio>
</Radio.Group>
}}/>
</Col>
</Row>
{(valueType == 2 || valueType == 3) &&
<Row className="formItem">
<Col span={4}>
{valueType == 2 ? "公式" : "SQL"}
<RequiredLabelTip />
</Col>
<Col span={20}>
<div

2
pc4mobx/hrmSalary/pages/salaryItem/formalFormModal.js
View File

@ -217,7 +217,7 @@ export default class FormalFormModal extends React.Component {
const { value, formulaDatasourceList, extendParam } = this.state;
return (
<WeaDialog
title="函数公式"
title={`${this.props.valueType == 2 ? "函数" : "SQL"}公式`}
visible={this.props.visible}
style={{ width: 800 }}
buttons={[

32
pc4mobx/hrmSalary/pages/salaryItem/index.less
View File

@ -6,14 +6,15 @@
}
}
.formula-wrapper{
.ant-modal-body{
.formula-wrapper {
.ant-modal-body {
min-height: 200px;
max-height: 85vh;
overflow: auto;
padding: 16px 20px !important;
}
.headerSearchWrapper{
.headerSearchWrapper {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
@ -21,15 +22,18 @@
}
.dataList-wrapper {
.wea-form-item-wrapper{
display: flex!important;
.wea-form-item-wrapper {
display: flex !important;
align-items: center;
.wea-select {
width: 100%;
margin-right: 8px;
.ant-select{
.ant-select {
width: 100%;
.ant-select-selection{
.ant-select-selection {
border-radius: 0;
height: 30px;
}
@ -37,3 +41,17 @@
}
}
}
//系统薪资项添加modal
.sys-salary-wrapper {
.wea-dialog-body{
height: 50vh;
overflow: hidden auto;
.headerSearchWrapper{
display: flex;
justify-content: flex-end;
align-items: center;
padding: 16px 20px;
}
}
}

38
pc4mobx/hrmSalary/pages/salaryItem/systemSalaryItemModal.js
View File

@ -43,37 +43,35 @@ export default class SystemSalaryItemModal extends React.Component {
<WeaDialog
title="添加系统薪资项目"
initLoadCss
className="formula-wrapper"
className="sys-salary-wrapper"
visible={this.props.visible}
onCancel={() => {
this.props.onCancel();
}}
style={{ width: 900 }}
style={{ width: "60vw" }}
buttons={[
<Button type="primary" onClick={() => {
handleAdd();
}}>添加</Button>
]}
>
<div style={{padding: "16px 20px"}}>
<div className="headerSearchWrapper">
<WeaInputSearch
value={searchValue}
onChange={(value) => {
this.handleSearchChange(value);
}}
onSearch={(value) => {
this.handleSearch(value);
}}/>
</div>
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
comsWeaTableStore={sysListTableStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
// getColumns={this.getColumns}
// onOperatesClick={this.onOperatesClick.bind(this)}
/>
<div className="headerSearchWrapper">
<WeaInputSearch
value={searchValue}
onChange={(value) => {
this.handleSearchChange(value);
}}
onSearch={(value) => {
this.handleSearch(value);
}}/>
</div>
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
comsWeaTableStore={sysListTableStore} // table store
hasOrder={true} // 是否启用排序
needScroll={false} // 是否启用table内部列表滚动，将自适应到父级高度
// getColumns={this.getColumns}
// onOperatesClick={this.onOperatesClick.bind(this)}
/>
</WeaDialog>
);
}

9
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/copySchemaModal.js
View File

@ -1,5 +1,6 @@
import React from "react";
import { WeaDialog, WeaError, WeaFormItem, WeaInput } from "ecCom";
import "./index.less";
export default class CopySchemaModal extends React.Component {
constructor(props) {
@ -13,12 +14,12 @@ export default class CopySchemaModal extends React.Component {
return (
<WeaDialog
title={`复制${this.props.title}`}
style={{ height: 120 }}
resize
initLoadCss
className="copyDialogWrapper"
buttons={this.props.footer}
onCancel={() => this.props.onCancel()}
visible={this.props.visible}>
<div style={{ width: "100%", height: "100%", padding: "20px 10px" }}>
<div className='contentWrapper'>
<WeaFormItem
label={`${this.props.title}名称`}
labelCol={{ span: 6 }}
@ -34,7 +35,7 @@ export default class CopySchemaModal extends React.Component {
style={{ width: "100%" }}
viewAttr={3}
onChange={(v) => {
if(v === '') this.refs.weaError.showError();
if (v === "") this.refs.weaError.showError();
this.setState({ value: v });
this.props.onChange(v);
}}/>

3
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/customNewModal.js
View File

@ -3,6 +3,7 @@ import { WeaDialog } from "ecCom";
import { Button } from "antd";
import { inject, observer } from "mobx-react";
import CustomForm from "../../../components/customForm";
import "./index.less";
@inject("programmeStore")
@observer
@ -28,6 +29,8 @@ export default class CustomNewModal extends React.Component {
const { programmeStore: { customRequest, setCustomRequest } } = this.props;
return (
<WeaDialog
initLoadCss
className='customFLOuter'
visible={this.props.visible}
onCancel={() => this.props.onCancel()}
title="新建自定义福利"

23
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/defaultSlideForm.js
View File

@ -1,11 +1,10 @@
import React from "react";
import { WeaSelect, WeaInput } from "ecCom";
import { WeaSelect, WeaInput, WeaTable } from "ecCom";
import { Table, Row, Col, Switch } from "antd";
import { insertUpdateColumns } from "./columns";
import { inject, observer } from "mobx-react";
import SmallTab from "../../../components/smallTab";
import "./index.less";
import RequiredLabelTip from "../../../components/requiredLabelTip";
@inject("programmeStore", "salaryFileStore", "taxAgentStore")
@observer
@ -173,6 +172,11 @@ export default class DefaultSlideForm extends React.Component {
defaultCompanyDataSource,
} = programmeStore;
const options = [
{
key: "",
selected: false,
showname: ""
},
{
key: "SCHEME_TOWN",
selected: true,
@ -200,12 +204,13 @@ export default class DefaultSlideForm extends React.Component {
<div>
<Row style={{ lineHeight: "40px" }}>
<Col span={6}>
缴纳类型<RequiredLabelTip />
缴纳类型
</Col>
<Col span={18}>
<WeaSelect
style={{ width: "200px" }}
options={options}
viewAttr={3}
value={this.props.requestParams.paymentType}
onChange={(v, showname) => {
let requestParams = { ...this.props.requestParams };
@ -218,10 +223,12 @@ export default class DefaultSlideForm extends React.Component {
<Row style={{ lineHeight: "40px" }}>
<Col span={6}>
方案名称<RequiredLabelTip />
方案名称
</Col>
<Col span={18}>
<WeaInput
style={{ width: "200px" }}
viewAttr={3}
value={this.props.requestParams.schemeName}
onChange={value => {
let requestParams = { ...this.props.requestParams };
@ -250,10 +257,11 @@ export default class DefaultSlideForm extends React.Component {
{
this.props.requestParams.sharedType === "1" &&
<Row style={{display:"flex",alignItems:"center",height:40,marginTop: 8}}>
<Col span={6}>可见性范围<RequiredLabelTip /></Col>
<Col span={6}>可见性范围</Col>
<Col span={18}>
<WeaSelect
multiple
viewAttr={3}
style={{ width: "200px" }}
value={this.props.requestParams.taxAgentIds}
options={taxAgentAdminOption}
@ -270,6 +278,7 @@ export default class DefaultSlideForm extends React.Component {
<Col span={6}>备注</Col>
<Col span={18}>
<WeaInput
style={{ width: "200px" }}
value={this.props.requestParams.remarks}
onChange={value => {
let requestParams = { ...this.props.requestParams };
@ -296,12 +305,12 @@ export default class DefaultSlideForm extends React.Component {
<div className="tableWrapper">
{this.state.selectItem == "个人"
? <Table
? <WeaTable
dataSource={defaultPersonDataSource}
columns={insertUpdateColumns}
pagination={false}
/>
: <Table
: <WeaTable
dataSource={defaultCompanyDataSource}
columns={insertUpdateColumns}
pagination={false}

2
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
View File

@ -4,7 +4,6 @@ import { toJS } from "mobx";
import { Button, Dropdown, Menu, message, Modal, Switch } from "antd";
import { WeaRightMenu, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import { WeaTableNew } from "comsMobx";
import "./index.less";
import { renderNoright } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../../components/customTab";
import SlideModalTitle from "../../../components/slideModalTitle";
@ -15,6 +14,7 @@ import { paymentScopeEnum, welfareTypeEnum } from "./enum";
import CustomPaginationTable from "../../../components/customPaginationTable";
import TwoColContent from "../../../components/twoColContent";
import CopySchemaModal from "./copySchemaModal";
import "./index.less";
const WeaMobxTable = WeaTableNew.WeaTable;

76
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.less
View File

@ -1,37 +1,63 @@
.defaultSlideForm {
padding: 20px;
.tableBar {
margin-top: 10px;
}
.tableWrapper {
margin-top: 10px;
padding: 20px;
.tableBar {
margin-top: 10px;
}
.tableWrapper {
margin-top: 10px;
}
}
.mySalaryBenefitsWrapper{
.wea-new-top-content{
overflow: hidden auto!important;
}
}
.customFLOuter{
.customFLWrapper{
padding: 16px 50px;
.wea-select{
display: inline-block;
}
}
}
.slideOuterWrapper{
.wea-slide-modal-title{
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close{
z-index: 99;
top: 10px!important;
}
.copyDialogWrapper {
.wea-dialog-body{
height: auto!important;
}
.contentWrapper {
padding: 20px 20%;
}
}
.slideOuterWrapper {
.wea-slide-modal-title {
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close {
z-index: 99;
top: 10px !important;
}
}
@media (min-width: 1260px){
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: 100%!important;
}
@media (min-width: 1260px) {
.slideOuterWrapper {
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
max-width: 100% !important;
}
}
}
@media screen and (min-width: 1060px) and (max-width: 1260px) {
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: calc(100% - 96px)!important;
}
.slideOuterWrapper {
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
max-width: calc(100% - 96px) !important;
}
}
}

8
pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBook/components/accountDialog.js
View File

@ -7,6 +7,7 @@
import React, { Component } from "react";
import { Button, Form, Input } from "antd";
import { WeaDatePicker, WeaDialog, WeaSelect } from "ecCom";
import "./index.less";
const createForm = Form.create;
const FormItem = Form.Item;
@ -27,6 +28,7 @@ class Accountdialog extends Component {
onOk(values);
});
};
render() {
const { getFieldProps } = this.props.form;
const formItemLayout = {
@ -37,6 +39,8 @@ class Accountdialog extends Component {
<WeaDialog
{...this.props}
style={{ maxHeight: 400 }}
initLoadCss
className="accountDialogWrapper"
buttons={[
<Button
type="primary"
@ -46,8 +50,9 @@ class Accountdialog extends Component {
</Button>
]}>
<Form horizontal form={this.props.form} style={{ marginTop: 16 }}>
<FormItem {...formItemLayout} label="账单月份" required>
<FormItem {...formItemLayout} label="账单月份">
<WeaDatePicker
viewAttr={3}
style={{ width: "100%" }}
format="YYYY-MM"
{...getFieldProps("billMonth", {
@ -61,6 +66,7 @@ class Accountdialog extends Component {
<FormItem {...formItemLayout} label="个税扣缴义务人">
<WeaSelect
style={{ width: "100%" }}
viewAttr={3}
options={this.props.options}
{...getFieldProps("paymentOrganization", {
initialValue: "",

12
pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBook/components/index.less
View File

@ -20,4 +20,14 @@
margin-right: 12px;
}
}
}
}
.accountDialogWrapper{
.wea-select,.ant-select,.ant-select-selection{
width: 100%;
}
.ant-select-selection{
height: 30px;
border-radius: 0;
}
}

169
pc4mobx/hrmSalary/pages/sysConfig/index.js
View File

@ -1,136 +1,65 @@
import React from "react";
import { WeaReqTop,WeaDialog } from "ecCom";
import { Button } from "antd";
import { WeaTable } from "ecCom";
import * as API from "../../apis/sysconfig";
import _ from "lodash";
export default class SysConfig extends React.Component {
constructor(props) {
super(props);
this.state = {
visible:false,
title: "WeaReqTop",
icon: <i className="icon-portal-workflow"/>,
iconBgcolor: "lightblue",
loading: false,
selectedKey: "main",
selectArray: [
{ key: 200, selected: true, showname: "200" },
{ key: 100, selected: false, showname: "100" }
],
childComCont: "子组件内容"
scrollHeight: "",
dataSource: [],
columns: [],
pageInfo: {
current: 1,
pageSize: 10,
total: 10
}
};
}
componentDidMount() {
this.getSysList();
}
getSysList = () => {
const { pageInfo } = this.state;
const payload = {
...pageInfo
};
API.getSysList(payload).then(({ status, data }) => {
if (status && !_.isEmpty(data)) {
const { columns, list: dataSource, total, pageSize, pageNum: current } = data;
this.setState({
columns,
dataSource,
pageInfo: { ...pageInfo, total, pageSize, current }
});
}
});
};
render() {
const {
title,
icon,
iconBgcolor,
loading,
selectedKey,
selectArray,
childComCont,
visible
} = this.state;
const btns = [
<Button type="primary" disabled={true} onClick={() => this.dosubmit()}>
提交（禁用）
</Button>,
<Button type="glost" disabled={false} onClick={() => this.dosubmit()}>
提交
</Button>
];
const dropMenuDatas = [
{
key: 1,
disabled: loading,
icon: <i className="icon-search"/>,
content: "搜索"
const { dataSource, columns, pageInfo, scrollHeight } = this.state;
const pagination = {
total: pageInfo.total,
showTotal: total => `共 ${total} 条`,
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"],
onShowSizeChange: (current, pageSize) => {
console.log(current, pageSize);
},
onChange: current => {
console.log(current);
}
];
const tabs = [
{
key: "main",
title: "主页"
},
{
key: "detail",
title: "详情"
},
{
key: "detail1",
title: "详情1"
},
{
key: "detail2",
title: "详情2"
},
{
key: "detail3",
title: "详情3"
},
{
key: "detail4",
title: "详情4"
},
{
key: "detail5",
title: "详情5"
},
{
key: "detail6",
title: "详情6"
},
{
key: "detail7",
title: "详情7"
},
{
key: "detail8",
title: "详情8"
}
];
};
return (
<div className="wea-top-demo">
<Button type="glost" onClick={() => this.setState({ visible: true })}>
点击
</Button>
<WeaDialog
onCancel={() => this.setState({ visible: false })}
visible={visible}
style={{ width: 800, height: 600 }}
hasScroll
>
<WeaReqTop
title={title}
icon={icon}
iconBgcolor={iconBgcolor}
loading={loading}
buttons={btns}
buttonSpace={10}
showDropIcon={true}
dropMenuDatas={dropMenuDatas}
onDropMenuClick={this.onDropMenuClick}
tabDatas={tabs}
selectedKey={selectedKey}
onChange={key => {
this.setState({
selectedKey: key,
childComCont: "你选择了 " + key + " tab页"
});
}}
>
<div style={{ height: 2000, background: "#fff" }}>{childComCont}</div>
</WeaReqTop>
</WeaDialog>
<div className="sysWrapper" id="tableid">
<WeaTable
columns={columns} dataSource={dataSource} pagination={pagination}
scroll={{ y: `calc(100vh - 97px)` }}
/>
</div>
);
}
onDropMenuClick(key) {
console.log(`点击了下拉菜单的第${key}项`);
}
dosubmit() {
console.log("点击了提交");
}
}

4
pc4mobx/hrmSalary/pages/taxAgent/personalScope.js
View File

@ -10,9 +10,7 @@ import { inject, observer } from "mobx-react";
import SlideTaxagentUser from "./slideTaxagentUser";
import "./index.less";
const personScopeWarrper = {
padding: "0 25px"
};
const personScopeWarrper = {};
@inject("taxAgentStore", "ledgerStore")
@observer

8
pc4mobx/hrmSalary/pages/taxAgent/slideTaxagentUser.js
View File

@ -1,6 +1,6 @@
import React from "react";
import { Button, message, Table } from "antd";
import { WeaInputSearch } from "ecCom";
import { Button, message } from "antd";
import { WeaInputSearch, WeaTable } from "ecCom";
import AddTaxAgentModal from "./addTaxAgentModal";
export default class SlideTaxagentUser extends React.Component {
@ -174,8 +174,8 @@ export default class SlideTaxagentUser extends React.Component {
/>
</div>
</div>
<div style={{ height: "500px", scrollY: "scroll" }}>
<Table
<div style={{ maxHeight: "500px", scrollY: "scroll" }}>
<WeaTable
rowKey="id"
loading={queryLoading}
rowSelection={rowSelection}

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

@ -9,7 +9,7 @@ export const getCustomSearchs = (form, condition, col, isCenter) => {
const formParams = form.getFormParams();
let items = [];
let group = [];
isFormInit && condition &&
isFormInit && condition &&
condition.map(c =>{
c.items.map(fields => {
items.push({
@ -46,45 +46,6 @@ export const getCustomSearchs = (form, condition, col, isCenter) => {
}
}
// 渲染form表单: 一般对form的渲染都统一使用该方法
// export const getSearchs = (form, condition, col, isCenter) => {
// const { isFormInit } = form;
// const formParams = form.getFormParams();
// let group = [];
// isFormInit && condition && condition.map(c =>{
// let items = [];
// c.items.map(fields => {
// items.push({
// com:(
// <WeaFormItem
// label={`${fields.label}`} // label 标签的文本
// labelCol={{span: `${fields.labelcol}`}} // label标签占一行比例
// wrapperCol={{span: `${fields.fieldcol}`}} // 右侧控件占一行比例
// error={form.getError(fields)} // 错误提示: 处理表单中有必填项,保存的校验
// tipPosition="bottom" // 错误提示的显示位置: top/bottom
// >
// <WeaSwitch
// fieldConfig={fields}
// form={form}
// formParams={formParams}
// />
// </WeaFormItem>),
// colSpan:1,
// })
// });
// group.push(
// <WeaSearchGroup
// col={col || 1} // 高级搜索列布局列数
// needTigger={true} // 是否开启收缩
// title={c.title || ''} // 高级搜索标题
// showGroup={c.defaultshow} // 是否开启面板
// items={items} // 条目数组数据
// center={isCenter || false} // 内容是否居中：一般弹框需要
// />)
// });
// return group;
// }
// 渲染form表单: 一般对form的渲染都统一使用该方法
export const getSearchs = (form, condition, col, isCenter) => {
const { isFormInit } = form;
@ -130,7 +91,7 @@ export const renderLoading = (loading) => (
<Spin spinning={loading} />
</div>
)
// 无权限处理
export const renderNoright = () => (
<WeaAlertPage>
@ -147,4 +108,24 @@ export const renderNoData = () => (
暂无数据
</div>
</WeaAlertPage>
)
)
//动态计算表格高度
export function getTableScroll({ extraHeight, id }) {
if (typeof extraHeight == "undefined") {
// 默认底部分页64 + 边距10
extraHeight = 64
}
let tHeader = null
if (id) {
tHeader = document.getElementById(id) ? document.getElementById(id).getElementsByClassName("ant-table-thead")[0] : null
} else {
tHeader = document.getElementsByClassName("ant-table-thead")[0]
}
//表格内容距离顶部的距离
let tHeaderBottom = 0
if (tHeader) {
tHeaderBottom = tHeader.getBoundingClientRect().bottom
}
return `calc(100vh - ${tHeaderBottom + extraHeight}px)`
}