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

考勤字段

This commit is contained in:
MustangDeng 2022-03-22 18:53:05 +08:00
parent 7c8dabaf8d
commit 9c57f58212
6 changed files with 232 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
pc4mobx/hrmSalary/apis/attendance.js
View File

@ -52,7 +52,14 @@ export const exportForTemplate = params => {
//数据采集-考勤引用-考勤字段管理列表
export const getAttendanceFieldList = params => {
return WeaTools.callApi('/api/bs/hrmsalary/attendQuote/fieldList', 'POST', params);
return fetch('/api/bs/hrmsalary/attendQuote/fieldList', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
}).then(res => res.json())
}
@ -63,7 +70,14 @@ export const getAttendanceFieldForm = params => {
//数据采集-考勤引用-新建考勤字段
export const saveAttendanceField = params => {
return WeaTools.callApi('/api/bs/hrmsalary/attendQuote/saveField', 'POST', params);
return fetch('/api/bs/hrmsalary/attendQuote/saveField', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
}).then(res => res.json())
}
//数据采集-考勤引用-修改考勤字段

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

@ -1,10 +1,11 @@
import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaTableNew } from "comsMobx"
import { Button, Table, DatePicker, Row, Col, Menu, Dropdown } from 'antd';
import { Button, Table, DatePicker, Row, Col, Menu, Dropdown, Switch } from 'antd';
import { WeaInputSearch, WeaSlideModal, WeaHelpfulTip, WeaCheckbox, WeaDatePicker, WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaSelect } from 'ecCom';
import { WeaInputSearch, WeaSlideModal, WeaHelpfulTip, WeaCheckbox, WeaDatePicker, WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaSelect } from 'ecCom';
import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from '../../../components/customTab';
@ -25,11 +26,23 @@ import ItemMangeFormModal from './itemMangeFormModal'
const { MonthPicker } = DatePicker;
const WeaTable = WeaTableNew.WeaTable;
@inject('attendanceStore')
@observer
export default class Attendance extends React.Component {
constructor(props) {
super(props);
columns.map(item => {
if(item.key == "cz") {
item.render = (text, record) => {
return (<div style={{display: "inline-block"}}>
<a type="link" onClick={() => this.onShowSlide()}>查看</a>
<a type="link" onClick={() => this.onDelete()} style={{marginLeft: "10px"}}>删除</a>
</div>)
}
}
})
this.state = {
value: "",
selectedKey: "0",
@ -40,17 +53,7 @@ export default class Attendance extends React.Component {
selectItemVisible: false,
refereAttendFormVisible: false,
tabSelectedKey: "0",
itemMangeVisible: false,
columns: columns.map(item => {
if(item.key == "cz") {
item.render = (text, record) => {
return (<div style={{display: "inline-block"}}>
<a type="link" onClick={() => this.onShowSlide()}>查看</a>
<a type="link" onClick={() => this.onDelete()} style={{marginLeft: "10px"}}>删除</a>
</div>)
}
}
})
itemMangeVisible: false
}
}
@ -181,6 +184,50 @@ export default class Attendance extends React.Component {
</Menu>
);
const handleTabChange = (v) => {
const { attendanceStore: { getAttendanceFieldList }} = this.props;
this.setState({
tabSelectedKey: v
})
if(v == "1") {
getAttendanceFieldList({})
}
}
// 字段Columns
const getFieldColumns = (columns) => {
let newColumns = '';
newColumns = columns.map(column => {
let newColumn = column;
newColumn.render = (text, record, index) => { //前端元素转义
let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
switch(newColumn.dataIndex) {
case "username":
return <a onClick={() => {this.onEdit(record)}}
dangerouslySetInnerHTML={{ __html: valueSpan }} />
case "enableStatus":
return <Switch checked={text == '1'}/>
case "operate":
return <a onClick={() => {this.onEdit(record)}}>查看明细</a>
default:
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
}
}
return newColumn;
});
return newColumns;
}
// 保存回调
const handleItemMangeSave = (value) => {
const { attendanceStore: { saveAttendanceField, getAttendanceFieldList }} = this.props;
value.fieldType = value.fieldType == "1" ? "NUMBER" : "TEXT"
saveAttendanceField(value)
getAttendanceFieldList({})
}
return (
<div className="mySalaryBenefitsWrapper">
<WeaRightMenu
@ -204,9 +251,7 @@ export default class Attendance extends React.Component {
renderSearchOperationItem()
}
onChange={(v) => {
this.setState({
tabSelectedKey: v
})
handleTabChange(v)
}}
/>
<CustomTab
@ -217,7 +262,14 @@ export default class Attendance extends React.Component {
}}
/>
<WeaTable columns={this.state.columns} dataSource={dataSource}/>
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
comsWeaTableStore={tableStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
// getColumns={this.getColumns}
// onOperatesClick={this.onOperatesClick.bind(this)}
/>
</div>
:
<div>
@ -233,7 +285,14 @@ export default class Attendance extends React.Component {
/>
<TwoColContent
leftContent={
<WeaTable columns={tab2Columns} dataSource={slideDataSource}/>
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
comsWeaTableStore={tableStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
getColumns={getFieldColumns}
// onOperatesClick={this.onOperatesClick.bind(this)}
/>
}
rightContent={
<TipLabel tipList={
@ -275,7 +334,7 @@ export default class Attendance extends React.Component {
</SelectItemModal>
<RefereAttendFormModal visible={this.state.refereAttendFormVisible} onCancel={() => this.setState({refereAttendFormVisible: false})}/>
<ItemMangeFormModal visible={this.state.itemMangeVisible} onCancel={() => {this.setState({itemMangeVisible: false})}}/>
<ItemMangeFormModal visible={this.state.itemMangeVisible} onSave={(value) => handleItemMangeSave(value)} onCancel={() => {this.setState({itemMangeVisible: false})}}/>
{
slideVisiable && <WeaSlideModal visible={slideVisiable}
top={0}
@ -298,9 +357,6 @@ export default class Attendance extends React.Component {
closeMaskOnClick={() => setSlideVisiable(false)} />
}
</div>
)
}
}

115
pc4mobx/hrmSalary/pages/dataAcquisition/attendance/itemMangeFormModal.js
View File

@ -1,48 +1,93 @@
import React from 'react'
import { Modal, Row, Col, Button,Switch } from 'antd'
import { Modal, Row, Col, Button,Switch, Select } from 'antd'
import { WeaInput, WeaSelect } from 'ecCom'
import SelectItemModal, { items } from '../../../components/selectItemsModal/selectItemsWrapper';
export default class ItemMangeFormModal extends React.Component {
constructor(props) {
super(props)
this.state = {
request: {
fieldName: "",
fieldType: "1",
enableStatus: 0,
description: ''
}
}
}
handleChange(params) {
const { request } = this.state
let result = {...request, ...params}
this.setState({request: result})
}
render() {
const options = [
{
key: "1",
selected: true,
showname: "数值"
},
{
key: "2",
selected: false,
showname: "文本"
}
]
const { request } = this.state;
const {fieldName, fieldType, enableStatus, description} = request
return (
<Modal width={800} visible={this.props.visible} onCancel={this.props.onCancel}
<Modal width={600} visible={this.props.visible} onCancel={this.props.onCancel}
title={"新建自定义字段"}
footer={
<Button type="primary">保存</Button>
<Button type="primary" onClick={() => this.props.onSave(this.state.request)}>保存</Button>
}>
<Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
<Col span={8}>
字段名称
</Col>
<Col span={16}>
<WeaInput style={{width: "200px"}} />
</Col>
</Row>
<Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
<Col span={8}>
类型
</Col>
<Col span={16}>
<WeaSelect style={{width: "200px"}} option={[{title: "数值", }, {title: "文本"}]}/>
</Col>
</Row>
<Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
<Col span={8}>
是否启用
</Col>
<Col span={16}>
<Switch />
</Col>
</Row>
<Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
<Col span={8}>
备注
</Col>
<Col span={16}>
<WeaInput style={{width: "200px"}} />
</Col>
</Row>
<div style={{padding: "20px"}}>
<Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
<Col span={8}>
字段名称
</Col>
<Col span={16}>
<WeaInput style={{width: "200px"}} value={fieldName} onChange={(v) => {this.handleChange({fieldName: v})}}/>
</Col>
</Row>
<Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
<Col span={8}>
类型
</Col>
<Col span={16}>
<WeaSelect style={{width: "200px"}} options={options} value={fieldType}
onChange={(v) => this.handleChange({fieldType: v})}
/>
</Col>
</Row>
<Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
<Col span={8}>
是否启用
</Col>
<Col span={16}>
<Switch checked={enableStatus == 1} onChange={(value) => {
let enableStatus = 0
if(value) {
enableStatus = 1
}
this.handleChange({enableStatus})
}}/>
</Col>
</Row>
<Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
<Col span={8}>
备注
</Col>
<Col span={16}>
<WeaInput style={{width: "200px"}} value={description} onChange={(v) => {
this.handleChange({description: v})
}}/>
</Col>
</Row>
</div>
</Modal>
)
}

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

@ -73,6 +73,24 @@ export default class Programme extends React.Component {
return newColumns;
}
getCustomColumns = (columns) => {
let newColumns = '';
newColumns = columns.map(column => {
let newColumn = column;
newColumn.render = (text, record, index) => { //前端元素转义
let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
switch(newColumn.dataIndex) {
case "operate":
return <a onClick={() => {this.onCustomEdit(record)}}>编辑</a>
default:
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
}
}
return newColumn;
});
return newColumns;
}
onEdit(record) {
let id = record.id;
const { programmeStore } = this.props
@ -102,6 +120,20 @@ export default class Programme extends React.Component {
}
}
onCustomOperatesClick(record, index, operate, flag) {
switch(operate.text.toString()){
case '编辑': // 编辑
this.onCustomEdit(record);
break;
}
}
onCustomEdit(record) {
this.setState({customNewVisible: true})
const { programmeStore: {getCustomForm}} = this.props;
getCustomForm({id: record.id})
}
render() {
const { programmeStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = programmeStore;
@ -278,6 +310,8 @@ export default class Programme extends React.Component {
comsWeaTableStore={tableStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
getColumns={this.getCustomColumns}
onOperatesClick={this.onCustomOperatesClick.bind(this)}
/>
}
rightContent={

25
pc4mobx/hrmSalary/stores/attendanceStore.js
View File

@ -2,7 +2,7 @@ import { observable, action, toJS } from 'mobx';
import { message } from 'antd';
import { WeaForm, WeaTableNew } from 'comsMobx';
import * as API from '../apis'; // 引入API接口文件
import * as API from '../apis/attendance'; // 引入API接口文件
const { TableStore } = WeaTableNew;
@ -72,4 +72,27 @@ export class AttendanceStore {
this.showSearchAd = false;
}
// 字段列表
@action getAttendanceFieldList = (params) => {
this.loading = true;
API.getAttendanceFieldList(params).then(res => {
if (res.status) { // 接口请求成功/失败处理
this.tableStore.getDatas(res.data.datas); // table 请求数据
} else {
message.error(res.msg || '接口调用失败！')
}
this.loading = false;
})
}
@action saveAttendanceField = (params) => {
API.saveAttendanceField(params).then(res => {
if(res.status) {
message.success("保存成功")
} else {
message.error("保存失败")
}
})
}
}

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

@ -51,7 +51,6 @@ export const getSearchs = (form, condition, col, isCenter) => {
const { isFormInit } = form;
const formParams = form.getFormParams();
let group = [];
alert("isFormInit: " + isFormInit)
isFormInit && condition && condition.map(c =>{
let items = [];
c.items.map(fields => {