页面列表与按钮样式 调整

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,7 +1,7 @@
import React, { useEffect, useState } from "react";
//第三方UI库/组件
import { Form, Button, Table, Select, Input, Space, Tooltip, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
//类型定义
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
//umi 相关
@ -11,6 +11,8 @@ import SupplierViewModal from './components/SupplierViewModal';
import SupplierDetailModal from './components/SupplierDetailModal';
//本地服务/接口
import { getRegisterPage } from './services';
//统一列表分页
import tableProps from '@/utils/tableProps'
// 列表数据接口
interface Data {
@ -77,7 +79,7 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
setData(data.records);
setPagination({ current: pageNo, pageSize, total: data.total });
} else {
message.error(message)
message.error(message)
}
} finally {
setLoading(false);
@ -116,9 +118,9 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
key: 'name',
align: 'left',
ellipsis: true,
render: (dom, record) =>
render: (dom, record) =>
<Tooltip title={record.name}>
<a
<a
onClick={() => {
dispatch({
type: 'globalModal/show',
@ -137,13 +139,15 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
dataIndex: 'supplierTypeCn',
key: 'supplierTypeCn',
align: 'center',
width: 160,
},
{
title: '供应商分类',
dataIndex: 'enterpriseTypeCn',
key: 'enterpriseTypeCn',
align: 'center',
width: 160,
},
{
title: '注册时间',
@ -151,11 +155,13 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
key: 'createTime',
align: 'center',
ellipsis: true,
width: 180,
},
{
title: '状态',
dataIndex: 'accessStatusCn',
key: 'accessStatusCn',
width: 160,
align: 'center',
render: (val: string) =>
<span style={{
@ -166,6 +172,7 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
title: '操作',
key: 'option',
align: 'center',
width: 160,
render: (record) => (
<Space>
<a
@ -182,58 +189,62 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
];
return (
<>
{/* 查询区 */}
<Form
form={form}
layout="inline"
onFinish={handleSearch}
style={{ marginBottom: 16 }}
>
<Form.Item name="name" label="供应商名称">
<Input placeholder="请输入供应商名称关键字" style={{ width: 220 }} allowClear maxLength={20} />
</Form.Item>
<Form.Item name="supplierType" label="境内/境外">
<Select style={{ width: 160 }} placeholder="请选择境内/境外" allowClear>
{regionOptions.map(opt => (
<Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item name="accessStatus" label="状态">
<Select style={{ width: 160 }} placeholder="请选择状态" allowClear>
{statusOptions.map(opt => (
<Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" icon={<SearchOutlined />}></Button>
</Form.Item>
<Form.Item>
<Button onClick={handleReset}></Button>
</Form.Item>
</Form>
{/* 列表 */}
<Table
rowKey="id"
columns={columns}
dataSource={data}
loading={loading}
pagination={pagination}
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
/>
{/* 查看组件 */}
<SupplierViewModal
visible={viewVisible}
record={currentRecord}
onCancel={() => setViewVisible(false)}
/>
{/* 准入明细组件 */}
<SupplierDetailModal
visible={detailVisible}
record={currentRecord}
onCancel={() => setDetailVisible(false)}
/>
<div className="common-container">
<div className="filter-action-row">
<Form
form={form}
layout="inline"
onFinish={handleSearch}
style={{ marginBottom: 16 }}
>
<Form.Item name="name" label="供应商名称">
<Input placeholder="请输入供应商名称关键字" style={{ width: 220 }} allowClear maxLength={20} />
</Form.Item>
<Form.Item name="supplierType" label="境内/境外">
<Select style={{ width: 160 }} placeholder="请选择境内/境外" allowClear>
{regionOptions.map(opt => (
<Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item name="accessStatus" label="状态">
<Select style={{ width: 160 }} placeholder="请选择状态" allowClear>
{statusOptions.map(opt => (
<Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item>
<Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />}></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={(pagination) => getList(pagination.current!, pagination.pageSize!)}
style={{ flex: 1, minHeight: 0 }}
scroll={{ y: 'calc(100vh - 350px)' }}
/>
{/* 查看组件 */}
<SupplierViewModal
visible={viewVisible}
record={currentRecord}
onCancel={() => setViewVisible(false)}
/>
{/* 准入明细组件 */}
<SupplierDetailModal
visible={detailVisible}
record={currentRecord}
onCancel={() => setDetailVisible(false)}
/>
</div>
</>
);
};