spug/spug_web/src/pages/config/service/Table.js

72 lines
1.8 KiB
JavaScript

import React from 'react';
import { observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import { Table, Divider, Modal, message } from 'antd';
import ComForm from './Form';
import http from 'libs/http';
import store from './store';
import { LinkButton } from "components";
@observer
class ComTable extends React.Component {
componentDidMount() {
store.fetchRecords()
}
columns = [{
title: '序号',
key: 'series',
render: (_, __, index) => index + 1,
width: 80,
}, {
title: '服务名称',
dataIndex: 'name',
}, {
title: '标识符',
dataIndex: 'key',
}, {
title: '描述信息',
dataIndex: 'desc',
ellipsis: true
}, {
title: '操作',
render: info => (
<span>
<LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
<Divider type="vertical"/>
<LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
<Divider type="vertical"/>
<Link to={`/config/setting/src/${info.id}`}>配置</Link>
</span>
)
}];
handleDelete = (text) => {
Modal.confirm({
title: '删除确认',
content: `确定要删除【${text['name']}】?`,
onOk: () => {
return http.delete('/api/config/service/', {params: {id: text.id}})
.then(() => {
message.success('删除成功');
store.fetchRecords()
})
}
})
};
render() {
let data = store.records;
if (store.f_name) {
data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
}
return (
<React.Fragment>
<Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
{store.formVisible && <ComForm/>}
</React.Fragment>
)
}
}
export default ComTable