页面列表与按钮样式 调整
This commit is contained in:
@ -1,10 +1,12 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Table, Form, Input, Button, Select, Modal, Descriptions } from 'antd';
|
||||
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
//字典与接口
|
||||
import { getPage, update } from './services';
|
||||
import { getDictList } from '@/servers/api/dicts'
|
||||
//统一列表分页
|
||||
import tableProps from '@/utils/tableProps'
|
||||
|
||||
interface CategoryOption {
|
||||
code: string;
|
||||
@ -23,7 +25,7 @@ const SupplierMessage: React.FC = () => {
|
||||
//查看信息与组件
|
||||
const [viewRecord, setViewRecord] = useState<any>(null); // 当前查看的消息
|
||||
const [viewVisible, setViewVisible] = useState(false); // 弹窗显隐
|
||||
//下拉数据
|
||||
//下拉数据
|
||||
const [categoryOptions, setCategoryOptions] = useState<CategoryOption[]>([]);
|
||||
|
||||
// 获取数据
|
||||
@ -122,35 +124,42 @@ const SupplierMessage: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form form={form} layout="inline" style={{ marginBottom: 12 }}>
|
||||
<Form.Item name="content" label="消息内容">
|
||||
<Input placeholder="请输入消息内容" style={{ width: 220 }} maxLength={50} allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item name="type" label="业务类型">
|
||||
<Select style={{ width: 200 }} placeholder="请选择业务类型" allowClear>
|
||||
{categoryOptions.map(opt => (
|
||||
<Select.Option key={opt.code} value={opt.code}>{opt.dicName}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>查询</Button>
|
||||
<Button style={{ marginLeft: 8 }} icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
...pagination,
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
}}
|
||||
onChange={handleTableChange}
|
||||
/>
|
||||
<div className="common-container">
|
||||
<div className="filter-action-row">
|
||||
<Form form={form} layout="inline" className="filter-form" >
|
||||
<Form.Item name="content" label="消息内容">
|
||||
<Input placeholder="请输入消息内容" style={{ width: 220 }} maxLength={50} allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item name="type" label="业务类型">
|
||||
<Select style={{ width: 200 }} placeholder="请选择业务类型" allowClear>
|
||||
{categoryOptions.map(opt => (
|
||||
<Select.Option key={opt.code} value={opt.code}>{opt.dicName}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch} >
|
||||
搜索
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
|
||||
</Form.Item>
|
||||
|
||||
|
||||
</Form>
|
||||
</div>
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{ ...tableProps.pagination, total: pagination.total }}
|
||||
onChange={handleTableChange}
|
||||
style={{ flex: 1, minHeight: 0 }}
|
||||
scroll={{ y: 'calc(100vh - 350px)' }}
|
||||
/>
|
||||
</div>
|
||||
<Modal
|
||||
title="消息详情"
|
||||
visible={viewVisible}
|
||||
|
Reference in New Issue
Block a user