119 lines
3.0 KiB
TypeScript
119 lines
3.0 KiB
TypeScript
import React, { useState, useRef } from 'react';
|
|
import Table, { ProColumns, ActionType } from '@/components/Table';
|
|
import { getNoticeList, createNotice, updateNotice, deleteNotice } from '@/services/system/notice';
|
|
import { fetchTableData } from '@/utils/table';
|
|
import AddNoticeModal from '../components/addNoticeModal';
|
|
import DeleteButton from '@/components/Table/DeleteButton';
|
|
import { Switch } from 'antd';
|
|
import EditNoticeModal from '../components/editNoticeModal';
|
|
|
|
const NoticeList = () => {
|
|
const tableRef = useRef<ActionType>();
|
|
|
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
|
const [isEditModalVisible, setIsEditModalVisible] = useState(false);
|
|
const [modalData, setModalData] = useState({});
|
|
|
|
const handleEdit = (row: any) => {
|
|
setModalData(row);
|
|
setIsEditModalVisible(true);
|
|
tableRef.current?.reload();
|
|
};
|
|
|
|
const handleDelete = async (code: any) => {
|
|
await deleteNotice({ code: code });
|
|
tableRef.current?.reload();
|
|
};
|
|
|
|
const columns: ProColumns<any>[] = [
|
|
{
|
|
title: '通知码',
|
|
dataIndex: 'code',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '通知地址',
|
|
dataIndex: 'addr',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '操作',
|
|
valueType: 'option',
|
|
width: 180,
|
|
render: (_, row) => [
|
|
<a
|
|
key="edit"
|
|
onClick={() => {
|
|
handleEdit(row);
|
|
}}
|
|
>
|
|
编辑
|
|
</a>,
|
|
<Switch
|
|
key="switch"
|
|
defaultChecked={row.status}
|
|
size="small"
|
|
onChange={async (checked) => {
|
|
row.status = checked;
|
|
await updateNotice(row);
|
|
}}
|
|
/>,
|
|
<DeleteButton
|
|
key="delete"
|
|
onDelete={() => {
|
|
handleDelete(row.code);
|
|
}}
|
|
/>,
|
|
],
|
|
},
|
|
];
|
|
return (
|
|
<div>
|
|
<Table
|
|
columns={columns}
|
|
rowKey="id"
|
|
toolBarActions={[
|
|
{
|
|
type: 'add',
|
|
onConfirm: () => {
|
|
setIsModalVisible(true);
|
|
},
|
|
},
|
|
]}
|
|
actionRef={tableRef}
|
|
request={async (params) => {
|
|
const res = await fetchTableData(getNoticeList, params);
|
|
return res;
|
|
}}
|
|
/>
|
|
<AddNoticeModal
|
|
visible={isModalVisible}
|
|
onCancel={function () {
|
|
setIsModalVisible(false);
|
|
}}
|
|
onOk={async function (val: any): Promise<void> {
|
|
await createNotice(val);
|
|
setIsModalVisible(false);
|
|
tableRef.current?.reload();
|
|
}}
|
|
/>
|
|
<EditNoticeModal
|
|
visible={isEditModalVisible}
|
|
editModalData={modalData}
|
|
onCancel={function () {
|
|
setIsEditModalVisible(false);
|
|
}}
|
|
onOk={async function (val: any): Promise<void> {
|
|
await updateNotice(val);
|
|
setIsEditModalVisible(false);
|
|
tableRef.current?.reload();
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NoticeList;
|