108 lines
3.0 KiB
JavaScript
108 lines
3.0 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 => {
|
||
const { showOperateBtn } = this.props;
|
||
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
|
||
disabled={!showOperateBtn}
|
||
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>
|
||
);
|
||
}
|
||
}
|