页面列表与按钮样式 调整

This commit is contained in:
孙景学
2025-07-10 15:38:05 +08:00
parent 42eca55bc1
commit 7049687456
33 changed files with 1525 additions and 1647 deletions

View File

@ -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}