96 lines
3.1 KiB
JavaScript
96 lines
3.1 KiB
JavaScript
import React from 'react'
|
||
import { inject, observer } from 'mobx-react';
|
||
import { Radio, Spin } from 'antd'
|
||
import { WeaTableNew } from 'comsMobx';
|
||
const WeaTable = WeaTableNew.WeaTable;
|
||
|
||
@inject('payrollStore')
|
||
@observer
|
||
export default class TemplateSettingList extends React.Component {
|
||
componentWillMount() {
|
||
const { payrollStore } = this.props;
|
||
const { getPayrollTemplateList } = payrollStore;
|
||
getPayrollTemplateList();
|
||
}
|
||
|
||
// 编辑操作按钮
|
||
onEdit(record) {
|
||
this.props.onEdit && this.props.onEdit(record)
|
||
}
|
||
|
||
// 复制操作按钮
|
||
onCopy(record) {
|
||
this.props.onCopy && this.props.onCopy(record)
|
||
}
|
||
|
||
// 删除操作按钮
|
||
onDelete(record) {
|
||
this.props.onDelete && this.props.onDelete(record)
|
||
}
|
||
|
||
// 操作按钮
|
||
onOperatesClick = (record, index, operate, flag) => {
|
||
switch(operate.index.toString()){
|
||
case '0': // 编辑
|
||
this.onEdit(record);
|
||
break;
|
||
case "1": // 复制
|
||
this.onCopy(record);
|
||
break;
|
||
case "2": // 删除
|
||
this.onDelete(record);
|
||
break;
|
||
}
|
||
};
|
||
|
||
// 默认使用配置
|
||
recordItemChange(record) {
|
||
const { payrollStore } = this.props;
|
||
const { changePayrollDefaultUse, getPayrollTemplateList } = payrollStore;
|
||
changePayrollDefaultUse(record.id).then(() => {
|
||
getPayrollTemplateList()
|
||
})
|
||
}
|
||
|
||
// 增加编辑功能，重写columns绑定事件
|
||
getColumns = (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 "useType":
|
||
return <Radio checked={record.useType == "1"} onChange={(value) => {this.recordItemChange(record)}}/>
|
||
default:
|
||
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
|
||
}
|
||
}
|
||
return newColumn;
|
||
});
|
||
return newColumns;
|
||
}
|
||
|
||
render() {
|
||
const { payrollStore } = this.props;
|
||
const { templateStore, loading } = payrollStore;
|
||
return (
|
||
<div>
|
||
{ loading ?
|
||
<div style={{width: '100%', textAlign: "center"}}>
|
||
<Spin />
|
||
</div>
|
||
:
|
||
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
|
||
comsWeaTableStore={templateStore} // table store
|
||
hasOrder={true} // 是否启用排序
|
||
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
|
||
getColumns={this.getColumns}
|
||
onOperatesClick={this.onOperatesClick.bind(this)}
|
||
/>
|
||
}
|
||
|
||
</div>
|
||
)
|
||
}
|
||
} |