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

薪资项目管理新增编辑页面重构

This commit is contained in:
黎永顺 2023-02-09 14:27:03 +08:00
parent 28dd4faf13
commit b2acfd61be
5 changed files with 356 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
pc4mobx/hrmSalary/pages/salaryItem/columns.js
View File

@ -1,3 +1,5 @@
import { dataTypeOptions, patternOptions, roundingModeOptions } from "./options";
export const columns = [
{
title: "名称",
@ -52,13 +54,91 @@ export const columns = [
];
export const salaryItemFields = [
{
key: '',
key: 'name',
label: '名称',
type: 'INPUT',
viewAttr: 3,
tip: ''
},
{
key: 'useInEmployeeSalary',
label: '薪资档案引用',
type: 'SWITCH',
viewAttr: 2,
tip: '提示：开启后，该薪资项目不可删除或设为无效，取值方式会默认置为输入'
},
{
key: 'useDefault',
label: '默认使用',
type: 'SWITCH',
viewAttr: 2,
tip: '提示：开启后，每个薪资方案都有该薪资项目，可在具体薪资方案中删除'
},
{
key: 'sharedType',
label: '可见性',
type: 'SELECT',
viewAttr: 2,
tip: ''
},
{
key: 'taxAgentIds',
label: '可见性范围',
type: 'SELECT',
viewAttr: 2,
tip: ''
},
{
key: 'dataType',
label: '字段类型',
type: 'SELECT',
viewAttr: 3,
options: dataTypeOptions,
tip: ''
},
{
key: 'roundingMode',
label: '舍入规则',
type: 'SELECT',
viewAttr: 2,
options: roundingModeOptions,
tip: ''
},
{
key: 'pattern',
label: '保留小数位',
type: 'SELECT',
viewAttr: 2,
options: patternOptions,
tip: ''
},
{
key: 'valueType',
label: '取值方式',
type: 'RADIO',
viewAttr: 2,
tip: ''
},
{
key: 'formulaContent',
label: '公式',
type: 'INPUT',
viewAttr: 2,
tip: ''
},
{
key: 'description',
label: '备注',
type: 'TEXTAREA',
viewAttr: 2,
tip: ''
},
];
export const valTakeOptions=[
{key: "1", showname: '输入'},
{key: "2", showname: '公式'},
{key: "3", showname: 'SQL'},
]

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

@ -3,6 +3,7 @@ import { Col, Row, Switch } from "antd";
import { WeaHelpfulTip, WeaInput, WeaSelect, WeaTextarea } from "ecCom";
import { dataTypeOptions, patternOptions, roundingModeOptions } from "./options";
import FormalFormModal from "./formalFormModal";
import SalaryItemForm from "./salaryItemForm";
import "./index.less";
export default class CustomSalaryItemSlide extends React.Component {
@ -50,227 +51,228 @@ export default class CustomSalaryItemSlide extends React.Component {
const { formalModalVisible } = this.state;
return (
<div className="customSalaryItemSlide">
<div>
<Row className="formItem">
<Col span={4}>名称</Col>
<Col span={20}>
<WeaInput
viewAttr={
(editable && this.props.record.canEdit) || isAdd ? 3 : 1
}
value={name}
onChange={value => {
this.handleChange({ name: value });
}}
/>
</Col>
</Row>
<Row className="formItem">
<Col span={4}>薪资档案引用</Col>
<Col span={20}>
<Switch
disabled={
!((editable && this.props.record.canEdit) || isAdd)
}
checked={useInEmployeeSalary == 1}
onChange={value => {
this.handleChange({ useInEmployeeSalary: value ? 1 : 0 });
}}
/>
<WeaHelpfulTip
style={{ marginLeft: "10px" }}
width={200}
title="提示：开启后，该薪资项目不可删除或设为无效，取值方式会默认置为输入"
placement="topLeft"
/>
</Col>
</Row>
<Row className="formItem">
<Col span={4}>默认使用</Col>
<Col span={20}>
<Switch
disabled={
!((editable && this.props.record.canEdit) || isAdd)
}
checked={useDefault == 1}
onChange={value => {
this.handleChange({ useDefault: value ? 1 : 0 });
}}
/>
<WeaHelpfulTip
style={{ marginLeft: "10px" }}
width={200}
title="提示：开启后，每个薪资方案都有该薪资项目，可在具体薪资方案中删除"
placement="topLeft"
/>
</Col>
</Row>
<SalaryItemForm {...this.props}/>
{/*<div>*/}
{/* <Row className="formItem">*/}
{/* <Col span={4}>名称</Col>*/}
{/* <Col span={20}>*/}
{/* <WeaInput*/}
{/* viewAttr={*/}
{/* (editable && this.props.record.canEdit) || isAdd ? 3 : 1*/}
{/* }*/}
{/* value={name}*/}
{/* onChange={value => {*/}
{/* this.handleChange({ name: value });*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* <Row className="formItem">*/}
{/* <Col span={4}>薪资档案引用</Col>*/}
{/* <Col span={20}>*/}
{/* <Switch*/}
{/* disabled={*/}
{/* !((editable && this.props.record.canEdit) || isAdd)*/}
{/* }*/}
{/* checked={useInEmployeeSalary == 1}*/}
{/* onChange={value => {*/}
{/* this.handleChange({ useInEmployeeSalary: value ? 1 : 0 });*/}
{/* }}*/}
{/* />*/}
{/* <WeaHelpfulTip*/}
{/* style={{ marginLeft: "10px" }}*/}
{/* width={200}*/}
{/* title="提示：开启后，该薪资项目不可删除或设为无效，取值方式会默认置为输入"*/}
{/* placement="topLeft"*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* <Row className="formItem">*/}
{/* <Col span={4}>默认使用</Col>*/}
{/* <Col span={20}>*/}
{/* <Switch*/}
{/* disabled={*/}
{/* !((editable && this.props.record.canEdit) || isAdd)*/}
{/* }*/}
{/* checked={useDefault == 1}*/}
{/* onChange={value => {*/}
{/* this.handleChange({ useDefault: value ? 1 : 0 });*/}
{/* }}*/}
{/* />*/}
{/* <WeaHelpfulTip*/}
{/* style={{ marginLeft: "10px" }}*/}
{/* width={200}*/}
{/* title="提示：开启后，每个薪资方案都有该薪资项目，可在具体薪资方案中删除"*/}
{/* placement="topLeft"*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{
(systemType == 0 || isAdd) &&
<Row className="formItem">
<Col span={12}>
<Row>
<Col span={8}>可见性</Col>
<Col span={16}>
<WeaSelect
disabled={!((editable && this.props.record.canEdit) || isAdd)}
value={String(sharedType)}
options={userStatusList}
onChange={value => {
let payload = {};
(value === "0" || value === "") && (payload.taxAgentIds = "");
payload.sharedType = value;
this.handleChange(payload);
}}
style={{ width: "200px" }}
/>
</Col>
</Row>
</Col>
</Row>
}
{
sharedType === "1" &&
<Row className="formItem">
<Col span={12}>
<Row>
<Col span={8}>可见性范围</Col>
<Col span={16}>
<WeaSelect
disabled={!((editable && this.props.record.canEdit) || isAdd)}
multiple
viewAttr={3}
style={{ width: "200px" }}
value={taxAgentIds}
options={taxAgentAdminOption}
onChange={(value) => {
this.handleChange({ taxAgentIds: value });
}}
/>
</Col>
</Row>
</Col>
</Row>
}
<Row className="formItem">
<Col span={12}>
<Row>
<Col span={8}>字段类型</Col>
<Col span={16}>
<WeaSelect
disabled={isAdd ? false : true}
value={dataType}
viewAttr={3}
options={dataTypeOptions}
onChange={value => {
this.handleChange({ dataType: value });
}}
style={{ width: "200px" }}
/>
</Col>
</Row>
</Col>
</Row>
<Row className="formItem">
<Col span={12}>
<Row>
<Col span={8}>舍入规则</Col>
<Col span={16}>
<WeaSelect
viewAttr={
(editable && this.props.record.canEdit) || isAdd ? 3 : 1
}
options={roundingModeOptions}
style={{ width: "200px" }}
value={roundingMode}
onChange={value => {
this.handleChange({ roundingMode: value });
}}
/>
</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={8}>保留小数位</Col>
<Col span={16}>
<WeaSelect
viewAttr={
(editable && this.props.record.canEdit) || isAdd ? 3 : 1
}
options={patternOptions}
onChange={value => {
this.handleChange({ pattern: value });
}}
value={pattern}
style={{ width: "200px" }}
/>
</Col>
</Row>
</Col>
</Row>
{/* {*/}
{/* (systemType == 0 || isAdd) &&*/}
{/* <Row className="formItem">*/}
{/* <Col span={12}>*/}
{/* <Row>*/}
{/* <Col span={8}>可见性</Col>*/}
{/* <Col span={16}>*/}
{/* <WeaSelect*/}
{/* disabled={!((editable && this.props.record.canEdit) || isAdd)}*/}
{/* value={String(sharedType)}*/}
{/* options={userStatusList}*/}
{/* onChange={value => {*/}
{/* let payload = {};*/}
{/* (value === "0" || value === "") && (payload.taxAgentIds = "");*/}
{/* payload.sharedType = value;*/}
{/* this.handleChange(payload);*/}
{/* }}*/}
{/* style={{ width: "200px" }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* </Col>*/}
{/* </Row>*/}
{/* }*/}
{/* {*/}
{/* sharedType === "1" &&*/}
{/* <Row className="formItem">*/}
{/* <Col span={12}>*/}
{/* <Row>*/}
{/* <Col span={8}>可见性范围</Col>*/}
{/* <Col span={16}>*/}
{/* <WeaSelect*/}
{/* disabled={!((editable && this.props.record.canEdit) || isAdd)}*/}
{/* multiple*/}
{/* viewAttr={3}*/}
{/* style={{ width: "200px" }}*/}
{/* value={taxAgentIds}*/}
{/* options={taxAgentAdminOption}*/}
{/* onChange={(value) => {*/}
{/* this.handleChange({ taxAgentIds: value });*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* </Col>*/}
{/* </Row>*/}
{/* }*/}
{/* <Row className="formItem">*/}
{/* <Col span={12}>*/}
{/* <Row>*/}
{/* <Col span={8}>字段类型</Col>*/}
{/* <Col span={16}>*/}
{/* <WeaSelect*/}
{/* disabled={isAdd ? false : true}*/}
{/* value={dataType}*/}
{/* viewAttr={3}*/}
{/* options={dataTypeOptions}*/}
{/* onChange={value => {*/}
{/* this.handleChange({ dataType: value });*/}
{/* }}*/}
{/* style={{ width: "200px" }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* </Col>*/}
{/* </Row>*/}
{/* <Row className="formItem">*/}
{/* <Col span={12}>*/}
{/* <Row>*/}
{/* <Col span={8}>舍入规则</Col>*/}
{/* <Col span={16}>*/}
{/* <WeaSelect*/}
{/* viewAttr={*/}
{/* (editable && this.props.record.canEdit) || isAdd ? 3 : 1*/}
{/* }*/}
{/* options={roundingModeOptions}*/}
{/* style={{ width: "200px" }}*/}
{/* value={roundingMode}*/}
{/* onChange={value => {*/}
{/* this.handleChange({ roundingMode: value });*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* </Col>*/}
{/* <Col span={12}>*/}
{/* <Row>*/}
{/* <Col span={8}>保留小数位</Col>*/}
{/* <Col span={16}>*/}
{/* <WeaSelect*/}
{/* viewAttr={*/}
{/* (editable && this.props.record.canEdit) || isAdd ? 3 : 1*/}
{/* }*/}
{/* options={patternOptions}*/}
{/* onChange={value => {*/}
{/* this.handleChange({ pattern: value });*/}
{/* }}*/}
{/* value={pattern}*/}
{/* style={{ width: "200px" }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* </Col>*/}
{/* </Row>*/}
<Row className="formItem">
<Col span={4}>取值方式</Col>
<Col span={20}>
<WeaSelect
disabled={isAdd ? false : true}
value={valueType}
viewAttr={3}
detailtype={3}
options={[
{ key: "1", showname: "输入" },
{ key: "2", showname: "公式" },
{ key: "3", showname: "SQL" }
]}
onChange={value => {
this.handleChange({
valueType: value,
formulaId: null,
formulaContent: ""
});
}}/>
</Col>
</Row>
{(valueType == 2 || valueType == 3) &&
<Row className="formItem">
<Col span={4}>
{valueType == 2 ? "公式" : "SQL"}
</Col>
<Col span={20}>
<div
style={{
width: "100%",
lineHeight: "30px",
minHeight: "30px",
border: "1px solid rgb(217, 217, 217)"
}}
onClick={() => {
if (this.props.record.canEdit || isAdd) {
editable && this.handleShowFormal();
}
}}>
{formulaContent}
</div>
</Col>
</Row>}
{/* <Row className="formItem">*/}
{/* <Col span={4}>取值方式</Col>*/}
{/* <Col span={20}>*/}
{/* <WeaSelect*/}
{/* disabled={isAdd ? false : true}*/}
{/* value={valueType}*/}
{/* viewAttr={3}*/}
{/* detailtype={3}*/}
{/* options={[*/}
{/* { key: "1", showname: "输入" },*/}
{/* { key: "2", showname: "公式" },*/}
{/* { key: "3", showname: "SQL" }*/}
{/* ]}*/}
{/* onChange={value => {*/}
{/* this.handleChange({*/}
{/* valueType: value,*/}
{/* formulaId: null,*/}
{/* formulaContent: ""*/}
{/* });*/}
{/* }}/>*/}
{/* </Col>*/}
{/* </Row>*/}
{/* {(valueType == 2 || valueType == 3) &&*/}
{/* <Row className="formItem">*/}
{/* <Col span={4}>*/}
{/* {valueType == 2 ? "公式" : "SQL"}*/}
{/* </Col>*/}
{/* <Col span={20}>*/}
{/* <div*/}
{/* style={{*/}
{/* width: "100%",*/}
{/* lineHeight: "30px",*/}
{/* minHeight: "30px",*/}
{/* border: "1px solid rgb(217, 217, 217)"*/}
{/* }}*/}
{/* onClick={() => {*/}
{/* if (this.props.record.canEdit || isAdd) {*/}
{/* editable && this.handleShowFormal();*/}
{/* }*/}
{/* }}>*/}
{/* {formulaContent}*/}
{/* </div>*/}
{/* </Col>*/}
{/* </Row>}*/}
<Row className="formItem">
<Col span={4}>备注</Col>
<Col span={20}>
<WeaTextarea
viewAttr={
(editable && this.props.record.canEdit) || isAdd ? 2 : 1
}
value={description}
onChange={value => {
this.handleChange({ description: value });
}}
/>
</Col>
</Row>
</div>
{/* <Row className="formItem">*/}
{/* <Col span={4}>备注</Col>*/}
{/* <Col span={20}>*/}
{/* <WeaTextarea*/}
{/* viewAttr={*/}
{/* (editable && this.props.record.canEdit) || isAdd ? 2 : 1*/}
{/* }*/}
{/* value={description}*/}
{/* onChange={value => {*/}
{/* this.handleChange({ description: value });*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/*</div>*/}
{formalModalVisible &&
<FormalFormModal
formulaId={formulaId}

6
pc4mobx/hrmSalary/pages/salaryItem/index.js
View File

@ -386,10 +386,12 @@ export default class SalaryItem extends React.Component {
className="slideOuterWrapper"
visible={editSlideVisible}
top={0}
width={40}
measureT="%"
width={800}
measureX="px"
height={100}
measureY="%"
direction={"right"}
measure={"%"}
title={
<SlideModalTitle
subtitle={(this.state.isAdd ? "新建" : "修改") + "自定义薪资项目"}

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

@ -1,8 +1,19 @@
.customSalaryItemSlide {
padding: 20px;
padding: 16px;
.formItem {
margin-bottom: 20px;
.wea-search-group {
padding: 0;
border: 1px solid #e5e5e5;
border-bottom: none;
.wea-content {
padding: 0;
.wea-form-item {
padding: 4px 16px;
border-bottom: 1px solid #e5e5e5;
}
}
}
}
@ -82,7 +93,7 @@
.wea-textarea-normal {
border: 1px solid #e5e5e5 !important;
padding: 4px 8px !important;
min-height: 70px!important;
min-height: 70px !important;
}
}
}

36
pc4mobx/hrmSalary/pages/salaryItem/salaryItemForm.js Normal file
View File

@ -0,0 +1,36 @@
/*
* Author: 黎永顺
* name: 薪资项目管理-新增自定义项表单
* Description:
* Date: 2023/2/9
*/
import React, { Component } from "react";
import { WeaCheckbox, WeaFormItem, WeaInput, WeaSearchGroup, WeaSelect, WeaTextarea } from "ecCom";
import { salaryItemFields, valTakeOptions } from "./columns";
class SalaryItemForm extends Component {
render() {
const { userStatusList } = this.props;
return (
<WeaSearchGroup showGroup needTigger={false}>
{
_.map(salaryItemFields, item => {
const { key, label, type, viewAttr, tip, options } = item;
return <WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
{
type === "INPUT" ? <WeaInput viewAttr={viewAttr}/> :
type === "SWITCH" ? <WeaCheckbox helpfulTip={tip} display="switch" viewAttr={viewAttr}/> :
type === "SELECT" ?
<WeaSelect options={key !== "sharedType" ? options : userStatusList} viewAttr={viewAttr}/> :
type === "RADIO" ? <WeaSelect options={valTakeOptions} detailtype={3} viewAttr={viewAttr}/> :
type === "TEXTAREA" ? <WeaTextarea viewAttr={viewAttr} minRows={3}/> : null
}
</WeaFormItem>;
})
}
</WeaSearchGroup>
);
}
}
export default SalaryItemForm;