import React, { Component } from "react";
import { Table, Storage } from "carrot";
import Request from "srcDir/util/request";
import { Tabs, Card, Button, Modal, Tree, notification } from "antd";
import Form from "./form.js";
import "./style.scss";
// const LoginHost = Storage.get("LoginHost");
const host = Storage.get("host");
// 当地登录银行信息
const currentBankBranch = Storage.get("currentBankBranch");
const edit = async (_this, data) => {
await _this.setState({
eidtState: true,
defaultKey: "3",
editData: data,
});
};
const del = (_this, data) => {
Modal.confirm({
title: "信息",
content: (
<div>
<p>确定要删除{data.username}?</p>
</div>
),
onOk () {
Request.DELETE(`${host}/local_branch_bank/del/${data.id}`).then((res) => {
if (res.success) {
notification.success({
message: "删除成功",
});
} else {
notification.warning({
message: "删除失败",
});
}
_this.loadData();
});
},
onCancel () { },
});
// console.log(_this, data);
};
const columns = _this => [{
title: "序号",
width: 80,
fixed: "left",
align: "center",
dataIndex: "sortNumber",
render: (text, record, index) => `${((_this.state.currentNum - 1) * _this.state.currentLimit) + index + 1}`
}, {
title: "网点名称",
dataIndex: "branchName",
align: "center"
// render: (text) => <span>{bankName(text, "s")}</span>
}, {
title: "网点编码",
dataIndex: "branchCode",
align: "center"
// render: (text) => <span>{bankName(text, "s")}</span>
}, {
title: "网点类型",
dataIndex: "branchTypeName",
align: "center"
// render: (text) => <span>{bankName(text, "s")}</span>
}, {
title: "网点代理类型",
dataIndex: "agentTypeName",
align: "center"
// render: (text) => <span>{bankName(text, "s")}</span>
}, {
title: "代理网点名称",
dataIndex: "agentBranchName",
align: "center"
// render: (text) => <span>{bankName(text, "s")}</span>
}, {
title: "代理网点编码",
dataIndex: "agentBranchCode",
align: "center"
// render: (text) => <span>{bankName(text, "s")}</span>
}, {
title: "操作",
width: 210,
fixed: "right",
dataIndex: "groupType",
align: "center",
render: (text, record) => (
<div>
{
<div className="operating-button-administrator">
<Button size="small" onClick={() => del(_this, record)}>删除</Button>
<Button size="small" onClick={() => edit(_this, record)}>编辑</Button>
<Button
size="small"
onClick={() => {
_this.props.history.push("/sysSet/dotList/detail", {
dotData: record
});
}}
>
查看</Button>
</div>
}
</div>
)
}
];
class View extends Component {
constructor (props) {
super(props);
this.input = React.createRef();
this.editNameInput = React.createRef();
this.state = {
defaultKey: "1", // tab切换默认选中第一个
eidtState: false, // 编辑状态
editData: {}, // 编辑数据
rules: [],
dataSource: {}, // 列表数据
currentNum: 1, // 加载数据默认显示第一页
currentLimit: 20 // 加载数据默认每页20条
};
}
componentDidMount () {
this.loadData();
}
onTabs= async (e) => {
this.setState({
defaultKey: e,
eidtState: false,
});
};
// 初始化数据
loadData = (obj) => {
Request.GET(`${host}/local_branch_bank/query`, {
params: {
page: (obj && obj.page) || this.state.currentNum,
limit: (obj && obj.limit) || this.state.currentLimit,
}
}).then((res) => {
this.setState({
dataSource: res.data, // 列表页面数据
});
});
};
callback = (e, trueOrfalse, bankId) => {
console.log(e, 11111); // 此处的e,是子组件的this
e.props.form.validateFields((err, values) => {
console.log(values);
if (!err) {
if (trueOrfalse) {
// 编辑网点内容
const allValues = values;
allValues.id = bankId;
allValues.bankCode = currentBankBranch.bankCode; // 所属银行
Request.POST(`${host}/local_branch_bank/update`,
{
body: allValues
}).then((res) => {
console.log(res);
if (!res.success) {
notification.warning({
message: res.msg,
});
e.setState({
btnStatus: false
});
} else {
notification.success({
message: "编辑成功",
});
// e.props.form.resetFields();
e.setState({
btnStatus: false
});
this.loadData();
}
});
} else {
// 添加网点
const allValues = values;
allValues.bankCode = currentBankBranch.bankCode; // 所属银行
Request.POST(`${host}/local_branch_bank/add`,
{
body: allValues,
}).then((res) => {
if (!res.success) {
notification.warning({
message: res.msg,
// description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
e.setState({
btnStatus: false
});
} else {
notification.success({
message: "添加成功",
// description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
e.props.form.resetFields();
e.setState({
btnStatus: false
});
this.loadData();
}
});
}
} else {
e.setState({
btnStatus: false
});
}
});
};
renderTreeNodes = (data) => {
return data.map((item) => {
if (item.children) {
return (
<Tree.TreeNode title={item.title} key={item.id}>
{this.renderTreeNodes(item.children)}
</Tree.TreeNode>
);
}
return <Tree.TreeNode title={item.title} key={item.id} />;
});
};
render () {
const {
dataSource,
editData,
currentNum,
currentLimit
} = this.state;
const emptyObject = Object.keys(editData).length > 0;
console.log(this.state.rules + currentNum + currentLimit);
return (
<div className="body">
<Tabs defaultActiveKey="1" onChange={(e) => this.onTabs(e)} activeKey={this.state.defaultKey} >
<Tabs.TabPane tab="网点列表" key="1">
<Table
dataSource={dataSource.content}
columns={columns(this)}
rowSelection={null}
rowKey="id"
scroll={{ x: 1600 }}
pagination={{
showQuickJumper: false, // 是否显示跳页面
total: dataSource.totalElements, // 数据总数
current: dataSource.number + 1, // 当前页
pageSize: dataSource.size, // 每页条数
showSizeChanger: true, // 是否可以改变 pageSize
// 切换页数
onChange: (page) => {
this.loadData({ limit: dataSource.size, page, });
this.setState({
currentLimit: dataSource.size,
currentNum: page
});
},
// 改变每页条数
onShowSizeChange: (current, limit) => {
this.loadData({ limit, page: 1 });
this.setState({
currentLimit: limit,
currentNum: 1
});
}
}}
/>
</Tabs.TabPane>
<Tabs.TabPane tab="添加网点" key="2">
<Card>
<Form callback={this.callback} isTrue={false} />
</Card>
</Tabs.TabPane>
{
this.state.eidtState &&
<Tabs.TabPane tab="编辑网点" key="3">
<Card>
{emptyObject && <Form callback={this.callback} data={editData} isTrue={!false} id={editData.id} />}
</Card>
</Tabs.TabPane>
}
</Tabs>
</div>
);
}
}
export default View;